Классные анимированные кнопки для сайта

Выкладываю архив со стильными анимированными кнопками для сайта, выполненными на чистом 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. Хроническии тонзиллит лечение у взрослых Солнышко.

Привожу реализацию одной из анимированных кнопок, с уклоном на WordPress.

Похожие по Тегам статьи