4323
- 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);
}
Можешь почитать и вот эту статейку "Протокол Open Graph"
Это тоже интересно
- 10.09.14Обалденные XOVERLAY CSS3 эффекты
- 01.07.13эффекты для изображений на CSS3
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.