Кнопки с использованием иконческих шрифтов
827материалов
228тем на форуме
3004комментария
6159пользователей

Кнопки с использованием иконческих шрифтов


Сейчас я хочу рассказать вам как создать красивые и интересные кнопки для вашего сайта используя те самые шрифты. Использовать мы будем шрифты Icomoon.io. Если вы захотите сменить иконку, просто сгенерируйте ее в этом сервисе. 

HTML 

А мы начнем с разметки. Долго я мучился что бы написать разметку для таких кнопок и все же остановился на этой. 
Код
<div class="button">   
   <span class="icn"><i class="icon-facebook"></i></span>   
   <span class="name"><a href="#">Facebook<small>Посетить Facebook</small></a></span>   
   </div>
 
Все вроде просто. 
Код
<i class="icon-facebook"></i>

Это и есть те самые иконки. Подходящие классы ваших иконок вы найдете в сервисе выше. 

CSS 

Оформление не займет много времени. Подключаем сгенерированные шрифты 
Код
<link rel="stylesheet" href="css/icon_font.css">
 
Теперь оформим нашу кнопку 
Код
.button {   
   position: relative;   
   clear: both;   
   display: inline-block;   
   width: 200px;   
   height: 60px;   
   cursor: pointer;   
   background: #176B8A;   
   text-shadow: 1px 1px 1px #444;   
   -webkit-border-radius: 4px;   
   -moz-border-radius: 4px;   
   border-radius: 4px;   
   -webkit-box-shadow: 0 5px 0 #05475F;   
   -moz-box-shadow: 0 5px 0 #05475F;   
   box-shadow: 0 5px 0 #05475F;   
   -webkit-transition: all .1s;   
   -moz-transition: all .1s;   
   -o-transition: all .1s;   
   transition: all .1s;   
   }   

   .button .icn {   
   display: block;   
   float: left;   
   background: #444;   
   font-size: 32px;   
   width: 60px;   
   text-align: center;   
   height: 60px;   
   line-height: 60px;   
   -webkit-border-radius: 4px 0 0 4px;   
   -moz-border-radius: 4px 0 0 4px;   
   border-radius: 4px 0 0 4px;   
   -webkit-box-shadow: 0 5px 0 #333, inset -1px 0 0 rgba(255,255,255,.1);   
   -moz-box-shadow: 0 5px 0 #333, inset -1px 0 0 rgba(255,255,255,.1);   
   box-shadow: 0 5px 0 #333, inset -1px 0 0 rgba(255,255,255,.1);   
   border-right: 1px solid #444;   
   }   

   .button .name a {   
   display: block;   
   width: 125px;   
   height: 52px;   
   float: right;   
   margin-top: 10px;   
   color: #fefefe;   
   font-size: 15px;   
   }   

   .button .name a small {   
   display:block;   
   font-size:13px;   
   }   

   .icn i {   
   -webkit-transition:all .1s;   
   -moz-transition:all .1s;   
   -o-transition:all .1s;   
   transition:all .1s;   
   color:#fefefe;   
   }   

   .button:hover > .icn > i {   
   font-size:38px;   
   }   

   .button:active,   
   .button:active > .icn {   
   top:5px;   
   -webkit-box-shadow: inset -1px 0 0 rgba(255,255,255,.1);   
   -moz-box-shadow: inset -1px 0 0 rgba(255,255,255,.1);   
   box-shadow: inset -1px 0 0 rgba(255,255,255,.1);   
   }

А теперь подключим JS скрипт который реализует наши шрифты в ie7 
Код
<!--[if lte IE 7]><script src="js/lte-ie7.js"></script><![endif]-->
 
Все готово. В демо версии я сгенерировал несколько иконок для наглядности. Можете использовать их в своих проектах.

ПОСМОТРЕТЬ ДЕМО ЗАКАЗАТЬ УСТАНОВКУ

Скрипт опубликовал:
...
Логин на сайте: ...
Группа: ...
Статус: ...
Информация о скрипте:
Дата добавления материала: 27.06.2013 в 01:11
Материал просмотрен: 716 раз
Категория материала: Скрипты для uCoz
К материалу оставлено: 0 комментариев

Пожаловаться
Сказать спасибо

0 комментариев


avatar
Вход через социальные сети
Работа в компании uCoz
uSocial - социальные кнопки
uLike – кнопка «Мне нравится»
Статистики нашего сайта