Технический форум купить трафик таргетированный
Вернуться   Технический форум > Программирование > Форум программистов > Изготовление сайтов


Ответ
 
Опции темы Опции просмотра
Старый 02.07.2013, 00:25   #1 (permalink)
GlaZZZ
Любитель
 
Аватар для GlaZZZ
 
Регистрация: 19.01.2011
Сообщений: 4,795
Записей в дневнике: 6
Сказал(а) спасибо: 105
Поблагодарили 28 раз(а) в 10 сообщениях
Репутация: 13067
По умолчанию Кнопки с использованием CSS3 анимаций

nieiie.png

Кнопки - это неотъемлемая часть любого сайта, которые играют очень важную роль. При создании этих кнопок хотелось сделать их необычными, легкими и красивыми. Картинки иконок уходят в прошлое. И для создания этих кнопок я использовал иконические шрифты, которые в свою очередь играют роль текста.

Нуссс, приступим

HTML код кнопок:
Код HTML:
<ul class="buttons">
<li><a href="#"><span aria-hidden="true" class="icon-designmodo-settings"></span></a></li>
<li><a href="#"><span aria-hidden="true" class="icon-skype"></span></a></li>
<li><a href="#"><span aria-hidden="true" class="icon-github"></span></a></li>
<li><a href="#"><span aria-hidden="true" class="icon-wordpress"></span></a></li>
<li><a href="#"><span aria-hidden="true" class="icon-joomla"></span></a></li>
<li><a href="#"><span aria-hidden="true" class="icon-tux"></span></a></li>
<li><a href="#"><span aria-hidden="true" class="icon-apple"></span></a></li>
<li><a href="#"><span aria-hidden="true" class="icon-picassa"></span></a></li>
<li><a href="#"><span aria-hidden="true" class="icon-steam"></span></a></li>
<li><a href="#"><span aria-hidden="true" class="icon-html5"></span></a></li>
<li><a href="#"><span aria-hidden="true" class="icon-chrome"></span></a></li>
<li><a href="#"><span aria-hidden="true" class="icon-firefox"></span></a></li>
</ul>

Все довольно просто. Мы создаем список, ul с классом buttons и в тег li помещаем нашу иконку. Список иконок может быть до бесконечности.

А теперь CSS

Мы подключим стили RESET и ICON(Те самые иконки)

В шапку сайта(<head>...</head>)
Код HTML:
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/icon.css">
Ну и теперь возьмемся за оформление(CSS код)

Стиль №1

Тут будет просто плавный переход в 0.2секунды

Код HTML:
.buttons li {
    float: left;
    margin: 0 10px;
    text-align: center;
}

.buttons li a {
    position: relative;
    display: block;
    width: 50px;
    height: 37px;
    background: #4A4A4A;
    color: #fff;
    padding-top: 12px;
    font-size: 20px;
    border-radius: 4px;
    box-shadow: 0 2px 0 #1D1D1D;
    transition: all .2s;
}

.buttons li a:hover {
    background: #6A6A6A;
    box-shadow: 0 2px 0 #4D4D4D;
}

.buttons li a:active {
    top: 2px;
    background: #6A6A6A;
    box-shadow: none;
}
Стиль №2

Здесь же тоже будет плавный переход, но при наводке кнопка будет прокручиваться
Код HTML:
.buttons li {
    float: left;
    margin: 0 10px;
    text-align: center;
}

.buttons li a {
    position: relative;
    display: block;
    width: 50px;
    height: 37px;
    background: #4A4A4A;
    color: #fff;
    padding-top: 12px;
    font-size: 20px;
    border-radius: 4px;
    box-shadow: 0 2px 0 #1D1D1D;
    
}

.buttons li a:hover {
    transition: all .7s;
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -o-transform:  rotate(360deg);
    transform:  rotate(360deg);
}

.buttons li a:active {
    transition: all .2s;
    top: 2px;
    background: #6A6A6A;
    box-shadow: none;
}

Стиль №3

А здесь будет плавное масштабирование кнопки
Код HTML:
.buttons li {
    float: left;
    margin: 0 10px;
    text-align: center;
}

.buttons li a {
    position: relative;
    display: block;
    width: 50px;
    height: 37px;
    background: #4A4A4A;
    color: #fff;
    padding-top: 12px;
    font-size: 20px;
    border-radius: 4px;
    box-shadow: 0 2px 0 #1D1D1D;
    transition: all .2s;
}

.buttons li a:hover {
    -webkit-transform: scale(1.25);
    -moz-transform: scale(1.25);
    -o-transform:  scale(1.25);
    transform:  scale(1.25);
}

.buttons li a:active {    
    top: 2px;
    background: #6A6A6A;
    box-shadow: none;
}

Исходные файлы прикладываю в архиве. Там же есть демо страничка html, чтобы оценить кнопки
Вложения
Тип файла: rar css-buttons.rar (50.1 Кб, 12 просмотров)
GlaZZZ вне форума   Ответить с цитированием

Старый 02.07.2013, 00:25
Helpmaster
Member
 
Аватар для Helpmaster
 
Регистрация: 08.03.2016
Сообщений: 0

Рекомендую вам обратить внимание на эти ссылки - тут можно поискать нужную информацию

UCam - создание панорам, анимаций, сканер QR-кодов
Схема с использованием светодиодов
Необходима схема защиты БП от КЗ с использованием реле

Ads

Яндекс

Member
 
Регистрация: 31.10.2006
Сообщений: 40200
Записей в дневнике: 0
Сказал(а) спасибо: 0
Поблагодарили 0 раз(а) в 0 сообщениях
Репутация: 55070
Ответ

Опции темы
Опции просмотра

Ваши права в разделе
Вы не можете создавать новые темы
Вы не можете отвечать в темах
Вы не можете прикреплять вложения
Вы не можете редактировать свои сообщения

BB коды Вкл.
Смайлы Вкл.
[IMG] код Выкл.
HTML код Выкл.
Trackbacks are Вкл.
Pingbacks are Вкл.
Refbacks are Выкл.




Часовой пояс GMT +4, время: 11:14.

Powered by vBulletin® Version 6.2.5.
Copyright ©2000 - 2014, Jelsoft Enterprises Ltd.