наверх





Делаем кнопку ссылкой или украшиваем ссылку под кнопку, а так же, как сделать, чтобы фон у кнопки был тоже ссылкой.


При создание меню, кнопок возникает небольшая проблема с тем, что сама кнопка в меню, которая должна ввести в определенный раздел, полностью не ссылка. То есть, ссылка лишь сам текст, а не кнопка. Конечно, такой вид можно оставить так, но зачем, когда кнопку можно сделать полностью ссылкой? Это и пользователю будет лучше. К тому же, делается это все очень просто, нужно добавить лишь одно свойство display, со значением блока.

.button {
background-color:#498DFB; /* Фон */
font:12pt Helvetica;    /* Размер, семейство шрифта */
position:absolute;    /* Абсолютное позиционирование */
}
.button a {    
padding:10px;    /* Внутренний отступ */
color:white;    /* Цвет текста (ссылки) */
text-decoration:none;    /* Убираем нижнюю линию под ссылкой */
display:block;    /* Делаем ссылку блоком */
}


Вот и все. Если мы задали ссылке значение block в свойстве display, то она будет размещаться по всему фону, в который мы его поместили. Вот такой вот хитрый прием.




Просмотр демо-варианта


Поделиться
Border-radius генератор
Занимаетесь веб-разработкой? Кроссбраузерный border-radius генератор с поддержкой выборочных скруглений краев.


Комментарии — 0


У вас нет прав для добавления комментария. Зарегистрируйтесь или авторизуйтесь.