Кнопки

07.07.2015

792

Различные интересные эффекты, которые можно применить для кнопок.

<p class="light-button green"><i class="fa fa-shopping-cart"></i> Корзина</p>
<p class="light-button orange"><i class="fa fa-exchange"></i> Сравнить</p>
<p class="light-button yellow"><i class="fa fa-envelope"></i> Отправить</p>
<p class="light-button blue"><i class="fa fa-calculator"></i> Расчет стоимости</p>
<p class="light-button violet"><i class="fa fa-search"></i> Поиск</p>
<p class="light-button red"><i class="fa fa-trash"></i> Удалить</p>
<p class="light-button birusa"><i class="fa fa-volume-up"></i> Слушать</p>
<p class="light-button darkgreen"><i class="fa fa-camera"></i> Галерея</p>
<p class="light-button coral"><i class="fa fa-cog"></i> Настройки</p>

CSS

/* Кнопки (разные) */

.line {border: 1px solid #000; border-bottom: 1px solid #222; clear: both;}

.line-wt {border: 1px solid #ddd; border-bottom: 1px solid #fff; clear: both;}

.light-button {
  box-sizing: border-box;
  width: 25%;
  min-width: 200px;
  padding: 8px 4px;
  margin: 5% auto;
  text-align: center !important;
  cursor: pointer;
  transition: color 0.3s, background-color 0.3s, border 0.3s;
}

.light-button:hover {color: #fff;}
.light-button:active {border: 2px solid rgb(255, 255, 255);}


.orange {border: 2px solid orange; color: orange;}
.orange:hover {background: orange;}

.yellow {border: 2px solid yellow; color: yellow;}
.yellow:hover {background: yellow; color: #111;}

.green {border: 2px solid rgb(122, 201, 0); color: rgb(122, 201, 0);}
.green:hover {background: rgb(122, 201, 0);}
	  
.blue {border: 2px solid rgb(0, 144, 255); color: rgb(0, 144, 255);}
.blue:hover {background: rgb(0, 144, 255);}	  

.red {border: 2px solid rgb(228, 23, 23); color: rgb(228, 23, 23);}
.red:hover {background: rgb(228, 23, 23);}

.violet {border: 2px solid blueviolet; color: blueviolet;}
.violet:hover {background: blueviolet;}
	  
.coral {border: 2px solid coral; color: coral;}
.coral:hover {background: coral;}

.birusa {border: 2px solid rgb(0, 182, 189); color: rgb(0, 182, 189);}
.birusa:hover {background: rgb(0, 182, 189);}

.darkgreen {border: 2px solid rgb(2, 119, 43); color: rgb(2, 119, 43);}
.darkgreen:hover {background: rgb(2, 119, 43);}

Примеры:

Корзина

Сравнить

Отправить

Расчет стоимости

Поиск

Удалить

Слушать

Галерея

Настройки

Градиентные границы

.gradient-border {
  padding: 20px;
  letter-spacing: 0.2em;
  border: 1px solid;
  border-image: linear-gradient(20deg, #f92056 38%, #00deff 65%);
  border-image-slice: 1;
  text-align: center;
}
Gradient Border

Поделится информацией с друзьями

  • Комментарии
  • Вложения

Добавить комментарий

Пока нет комментариев. Будь первым!

Кнопки
Различные ошибки и их решения
Рекомендации для васРазличные ошибки и их решенияOpttour.ru
Спасибо! Наш менеджер свяжется с Вами в течении 5 минут.