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