4356
- 0
Представляю вам коллекцию CSS3 hover эффектов для кнопок, логотипов,ссылок.Сейчас мы добавим эти эффекты к нашим кнопкам.
Итак приступим.
1.Скачиваем архив Вы не можете скачивать файлы с нашего сайта ,рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.
,распаковываем и смотрим исходник,он нам понадобится.
2.В head подключаем файл стилей
Код:
<link href="{{ tpl_url }}/css/hover.css" rel="stylesheet" media="all">обязательное оформление нашей кнопки
Код:
.button {
margin: .4em;
padding: 1em;
cursor: pointer;
background: #F08258;
text-decoration: none;
color: #0F0F0F;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}Ну, а так проще подключить одной строчкой.
4.Сам код нашей ссылки (кнопки)
Код:
<a href="#" class="button">Купить</a>
Код:
<a href="#" class="button grow-rotate">Купить</a>
Код:
/* Grow Rotate */
.grow-rotate {
display: inline-block;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-property: transform;
transition-property: transform;
-webkit-transform: translateZ(0);
transform: translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.grow-rotate:hover,
.grow-rotate:focus,
.grow-rotate:active{
-webkit-transform: scale(1.1) rotate(4deg);
transform: scale(1.1) rotate(4deg);
}
Можешь почитать и вот эту статейку "Как увидеть пароль, скрытый звёздочками?"
Это тоже интересно
10.09.14Обалденные XOVERLAY CSS3 эффекты
01.07.13эффекты для изображений на CSS3
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.