Войти на сайт Регистрация
Добавить файлВ каталоге: 678
Красивые кнопки на CSS
21.11.2018
Красивые кнопки на CSS
  • 944 Просмотров:
  • 0 Скачиваний:
  • 0 Комментариев:
  • 0.0 Рейтинг:
  • (Голосов: 0)
Описание:
Сейчас я хочу рассказать вам как создать красивые и интересные кнопки для вашего сайта используя те самые шрифты.

А мы начнем с разметки. Долго я мучился что бы написать разметку для таких кнопок и все же остановился на этой.
Код
<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>


Оформление не займет много времени. Подключаем сгенерированные шфифты
Код
<link rel="stylesheet" href="http://7old.ru/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="http://7old.ru/js/lte-ie7.js"></script><![endif]-->


ПОСМОТРЕТЬ ДЕМО
Красивые кнопки на CSS" title="Скачать Красивые кнопки на CSS бесплатно, без смс и регистрации" target="_blank">Сервер Скачать файл
Источник: 7old.ru
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]