Форма входа
Запомнить меня Забыл пароль ?

Кнопочки с использованием transition


Кнопочки с использованием transition
Кнопки с использованием transitions, а точнее transition-duration: 0.3s; и transition-property: background, color;

transition-duration: 0.3s; - задает время, сколько будет длится анимация.
transition-property: background, color; - имя стилевого свойства.

Так будет выглядеть HTML разметка
[HTML]<div>
<a class="linka" href="#">Ссылка 1</a>
<a class="linka" href="#">Ссылка 2</a>
<a class="linka" href="#">Ссылка 3</a>
<a class="linka" href="#">Ссылка 4</a>
</div>

<div>
<a class="linka" href="#">Ссылка 5</a>
<a class="linka" href="#">Ссылка 6</a>
<a class="linka" href="#">Ссылка 7</a>
<a class="linka" href="#">Ссылка 8</a>
</div>[/HTML]

Далее CSS код, разумеется с псевдоклассом :hover
[CSS].linka {
background: #303030;
border-radius: 4px;
clear: both;
color: #FFFFFF;
display: inline-block;
font-size: 12px;
font-weight: 400;
margin: 5px;
padding: 2px 4px;
text-decoration: none;
transition-duration: 0.3s;
transition-property: background, color;
}

.linka:hover {
background: #ff0000;
clear: both;
color: #FFFFFF;
text-decoration: none;
}[/CSS]

Все очень просто и кратко.

Опубликовал: web-deva
Используемый код: HTML CSS
Web-сайт автора: http://web-deva.net
Автор: Dark_Delphin
СКАЧАТЬ

Размер файла: 1.1 Kb

ДЕМО

Посмотреть
живой пример

Комменты


Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация ]
Отправить отзыв
Ваше имя *:
E-mail отправителя *:
Тема *:
Текст сообщения *:
Код безопасности *: