Кнопки

07.07.2015

726

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

Корзина

Сравнить

Отправить

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

Поиск

Удалить

Слушать

Галерея

Настройки

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

.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

Корзина


Сравнить


Отправить


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


Поиск


Удалить


Слушать


Галерея


Настройки

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

.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-color: orange; }

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

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

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

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

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

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

Корзина

Сравнить

Отправить

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

Поиск

Удалить

Слушать

Галерея

Настройки

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

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

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

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