Как сделать кнопку на сайте с эффектом нажатия
Конечно, активные элементы сайта усложняют код, но взаимодействие с пользователем делают более интересным и понятным. И всё-таки один из вариантов – как сделать кнопку на сайте, имитирующую нажатие. Смена фона, имитация нажатия реализуется средствами CSS.
В нужном месте разместим html-код кнопки:
<a class="blue_button" href="#"><span>название кнопки</span></a>
Чтобы её стили не применились к другим, уже присутствующим, создадим новый класс – "blue_button". Лаконичное название класса обусловлено цветом будущей кнопки – например синий. В атрибут href вместо решётки # поместите адрес ссылки.
Для оформления кнопки в файл CSS добавим код, который и создаст иллюзию нажатия кнопки при наведении мыши:
.blue_button {
color : #fff !important ;/*принудительно зададим цвет надписи кнопки*/
float : right; /*расположим кнопку справа*/
font-size : 110%;/*размер шрифта надписи*/
margin : 5px 0; /*отступы*/
}
.blue_button > span {
background : linear-gradient(#4dd9ff, #00b4ff); /*фон кнопки градиентом*/
border-bottom : 2px solid #00b5e6; /*нижняя рамка*/
border-radius : 3px; /*скруглим рамку*/
padding : 6px 2px 7px 2px; /*поля*/
position : relative; /*задаём для эффекта нажатия*/
top : 0; /*задаём для эффекта нажатия */
}
.blue_button:hover > span { /*эффекты имитации нажатой кнопки при наведении мыши*/
background : linear-gradient(#00b4ff 0%, #4dd9ff 200%);/*замена градиента*/
border-bottom : none; /*убрали нижнюю рамку*/
top : 2px; /*смещение положения*/
}
Как сделать кнопку на сайте с другим цветом – сменить стили на своё усмотрение, кнопке можно задать другое размещение, форму, то есть полностью подогнать под свои желания и ещё добавить ей функциональности.
Отредактировано: 12.02.2017 18:19:42
Комментарии (1):
Кнопка реализована на этой странице - это синяя кнопка "Предыдущая статья"
Ответить
Для добавления комментариев необходимо авторизоваться, если не зарегистрированы - зарегистрироваться.