5 кнопок с эффектами и анимацией CSS
 | |
| Кнопки для сайта стали больше чем дизайн, ведь они теперь идут с красивыми эффектами анимации, где основном показывают при наведении курсора. Вашему вниманию небольшая подборка с кнопками, с очень разнообразными трюками по анимации, которые отлично подойдут на любой тематический сайт. Кому нравится простота, особенно когда дело доходит до веб-дизайна, то вероятно вам понравиться. Веб мастера могут создавать сумасшедшие эффекты, где станут применять простые действия, это зависания, которое происходит как при наведении, так и при клике по элементу. Все в основе идет к настольным пользователям, а если говорить про мобильные сети, то здесь аналогично идет поддержка на все представленные эффекты при нажатии или наведение на основу каркаса. Вы увидите все примеры кнопок, что предоставлены ниже, а затем соответствующий код HTML и CSS, чтобы кнопки работали на интернет ресурсе или блоге, также не исключение, как целевая страница, где установлен элемент. Первый пример стиля кнопки: При наведение кнопка меняет оттенок цвета и начинает плавно увеличиваться, где эффект очень замечен.  HTML Код <a class="dupesabned-lkexaginos" href="http://zornet.ru" target="_blank">Добавить призыв к действию</a> CSS Код .dupesabned-lkexaginos { color: #f7f2f2 !important; text-transform: uppercase; background: #2458bb; padding: 18px; border-radius: 3px; display: inline-block; border: none; text-decoration: none; } .dupesabned-lkexaginos:hover { background: #434343; letter-spacing: 1px; -webkit-box-shadow: 0px 4px 35px -10px rgba(35, 34, 34, 0.64); -moz-box-shadow: 0px 4px 35px -10px rgba(35, 34, 34, 0.64); box-shadow: 4px 35px -10px rgba(35, 34, 34, 0.64); transition: all 0.4s ease 0s; } Эта первая кнопка, которая очень простая по дизайну, где слегка закругленными углами в 3 пикселей. При наведении курсора кнопка медленно переходит с небольшим буквенным интервалом и изменением цвета на сплошной серый. Вы также можете изменить цвет, отступы, границы и типография в соответствии с дизайном вашего сайта. Демонстрация Второй пример стиля кнопки:  Второй стиль кнопки, который показанный ниже идет почти антологичному первому. Тем не менее края сделаны, чтобы казаться намного более круглыми. Что по эффектам, то здесь при наведение появляются тени, где смотрится, как будто она приподнимается. HTML Код <a class="vadesabu-kilsated" href="Ссылка для перехода" target="_blank" rel="nofollow">Здесь идет название</a> CSS Код .vadesabu-kilsated { color: #f3efef !important; text-transform: uppercase; background: #296b84; padding: 15px; border-radius: 100px; display: inline-block; border: none; text-decoration: none; border: 3px solid #d2d0d0; } .vadesabu-kilsated:hover { text-shadow: 0px 0px 6px rgba(234, 234, 234); -webkit-box-shadow: 0px 5px 40px -10px rgba(25, 24, 24, 0.64); -moz-box-shadow: 0px 5px 40px -10px rgba(25, 24, 24, 0.64); transition: all 0.4s ease 0s; } При наведении на кнопку поднимается с небольшим эффектом тени. Текст также имеет небольшой теневой эффект свечения при наведении Демонстрация Третий пример стиля кнопки:  Третий стиль кнопок, которым здесь прописан, на самом деле является одним из распространенных стилей. Это называется эффектом призрачной кнопки, опять же со слегка закругленными углами. При наведении курсора кнопка превращается в сплошной оранжевый цвет кнопки, а цвет текста меняется на белый HTML Код <a class="kulesaved-kitugcanlopas" href="Ссылка сайт" target="_blank" rel="nofollow">Ключевое слово на сайте</a> CSS Код .kulesaved-kitugcanlopas { color: #5d5454 !important; text-transform: uppercase; background: #ececec; padding: 18px; border: 3px solid #565050 !important; border-radius: 6px; display: inline-block; text-decoration: none; } .kulesaved-kitugcanlopas:hover { color: #fbf8f8 !important; background: #b78620; border-color: #b78620 !important; transition: all 0.5s ease 0s; } Такое направление дизайна, отлично подходит на разные тематические интернет площадке, что на официальном сайте можно увидеть, также на блоге или портфолио. Демонстрация Четвертый пример стиля кнопки:  Опять же, это еще одна кнопка в стиле предыдущей, но только слегка закругленными углами и рамкой 3 пикселя. HTML Код <a class="delakotigde-kalodapedun" href="Ссылка при переходе на страницу" target="_blank">Ключевое слово на сайте</a> CSS Код .delakotigde-kalodapedun { color: #108447 !important; text-transform: uppercase; background: #f7f1f1; padding: 19px; border: 3px solid #179050 !important; border-radius: 5px; display: inline-block; text-decoration: none; } .delakotigde-kalodapedun:hover { color: #204369 !important; border-radius: 50px; border-color: #204369 !important; transition: all 0.4s ease 0s; } При наведении курсор переходит из зеленого в серый с полностью закругленными краями. Демонстрация Пятый пример стиля кнопки:  Подошли крайнему стилю кнопки, которую вы можете попробовать на своем сайте, где ниже вы найдете достаточно простую кнопку слегка закругленными углами HTML Код <a class="algebudesa-kezopnedulon" href="Ссылка на переход по клику" target="_blank">Прописать название zornet.ru</a> CSS Код .algebudesa-kezopnedulon { border: none; background: #464040; color: #f3ecec !important; font-weight: 100; padding: 25px; text-transform: uppercase; border-radius: 3px; display: inline-block; text-decoration: none; } .algebudesa-kezopnedulon:hover { color: #403c3c !important; font-weight: 700 !important; letter-spacing: 3px; background: none; -webkit-box-shadow: 0px 5px 38px -10px rgba(29, 28, 28, 0.68); -moz-box-shadow: 0px 5px 38px -10px rgba(29, 28, 28, 0.68); transition: all 0.5s ease 0s; } При наведении курсора кнопка становится прозрачной, и вокруг кнопки появляется расширенная тень эффекта, где заметите, что внутри подсвечивается при увеличении расстояния между буквами при наведении. Демонстрация Добавление пустого пространства вокруг кнопок с помощью контейнера: Здесь нужно подметить, что вокруг самой кнопок недостаточно свободного места или они располагаются слишком близко к другим элементам содержимого на ваших страницах. То здесь просто создайте контейнер кнопки, где нужно задать правила в стилистике CSS, где задействуем класс контейнера. И не забываем, что каждый элемент кнопки имеет класс, где у каждого свой оригинальный, что сделано в том случай, если ставить несколько вариантов на один сайт, то не было конфликта, а это все корректно показывало на всех носителях, как на большом мониторе, так на мобильных аппаратах. Получив класс контейнера, добавьте его в таблицу стилей вашей темы. Код .klas { margin-top: 15px; margin-bottom: 35px; } Вашему вниманию представлено пять не сложных, но элегантных по дизайну стилей кнопок с несколькими классными эффектами при наведении, которые вы можете разместить для использования на сайте. Не стесняйтесь экспериментировать с CSS, разбивая и изменяя элементы, чтобы сделать их более уникальными для вашего собственного сайта или дизайна целевой страницы. | |
Поделиться в социальных сетях
Материал разместил
| Комментарии: 0 | |