Выкладываю архив со стильными анимированными кнопками для сайта, выполненными на чистом CSS, без использования JS. Эффект анимации происходит при наведении на кнопку курсора. По другому это еще называется hover — эффектом.
Наводил порядок у себя в папке с CSS эффектами, удалял старье, и наткнулся на этот архивчик.
Как я про него забыл?
Предлагаю посмотреть примеры:
На мой взгляд очень красивая и стильная подборка кнопок с минимумом кода.
Привожу реализацию одной из анимированных кнопок, с уклоном на WordPress.
Скачайте и распакуйте архив, выберите из него один или несколько вариантов анимированных кнопок. В файле style.css
(который из архива), все помечено и разделено, и соответственно, в файле index.html
. Cмотрите по названиям на кнопочках. И поместите в файл style.css
вашего сайта.
Это общие стили, применимые к любой их кнопок из набора.
.button { margin: 20px; padding: 5px; cursor: pointer; background: #5F99DF; text-decoration: none; color: #ffffff; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); width:120px; height:40px; }
CSS код анимированной кнопки «pulse»
/* Pulse */ @-webkit-keyframes pulse { 25% { -webkit-transform: scale(1.1); transform: scale(1.1); } 75% { -webkit-transform: scale(0.9); transform: scale(0.9); } } @keyframes pulse { 25% { -webkit-transform: scale(1.1); transform: scale(1.1); } 75% { -webkit-transform: scale(0.9); transform: scale(0.9); } } .pulse { display: inline-block; -webkit-transform: translateZ(0); transform: translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); } .pulse:hover, .pulse:focus, .pulse:active { -webkit-animation-name: pulse; animation-name: pulse; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-timing-function: linear; animation-timing-function: linear; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; }
Ну и что остается, так это добавить код из файла index.html
в публикацию, или на страницу сайта. Редактор должен быть переведен в текстовый режим.
HTML код анимированной кнопки «pulse»
<a href="#" class="button pulse">pulse</a>
— Все, анимированная кнопка CSS для сайта реализована. А вы думали будет сложнее?
Экскурсии и туры на сахалине: южно сахалинск экскурсии по сахалину prosakh.ru. Хроническии тонзиллит лечение у взрослых Солнышко.