« Готовый набор разноцветных CSS кнопок в стиле Flat »

Описание материала:

Готовый набор разноцветных CSS кнопок в стиле Flat. Кнопки четырех разных размеров(Normal, Small, Medium, Large) и имеют семь разных цветов(Grey, Green, Purple, Navy Blue, Pink, Blue, Yellow). Данные кнопки состоят из HTML и CSS.

HTML:
Не обязательно использовать тег button, важно указание классов, которые придают тегу вид кнопки.
html код для использования всех возможных вариантов кнопок:
Normal Size:

Код
<button class="flat xs grey">Grey</button>
<button class="flat xs green">Green</button>
<button class="flat xs purple">Purple</button>
<button class="flat xs navy-blue">Navy Blue</button>
<button class="flat xs pink">Pink</button>
<button class="flat xs blue">Blue</button>
<button class="flat xs yellow">Yellow</button>

Small Size:
Код
<button class="flat sm grey">Grey</button>
<button class="flat sm green">Green</button>
<button class="flat sm purple">Purple</button>
<button class="flat sm navy-blue">Navy Blue</button>
<button class="flat sm pink">Pink</button>
<button class="flat sm blue">Blue</button>
<button class="flat sm yellow">Yellow</button>

Medium Size:
Код
<button class="flat md grey">Grey</button>
<button class="flat md green">Green</button>
<button class="flat md purple">Purple</button>
<button class="flat md navy-blue">Navy Blue</button>
<button class="flat md pink">Pink</button>
<button class="flat md blue">Blue</button>
<button class="flat md yellow">Yellow</button>

Large Size:
Код
<button class="flat lg grey">Grey</button>
<button class="flat lg green">Green</button>
<button class="flat lg purple">Purple</button>
<button class="flat lg navy-blue">Navy Blue</button>
<button class="flat lg pink">Pink</button>
<button class="flat lg blue">Blue</button>
<button class="flat lg yellow">Yellow</button>

CSS:
Код
@charset "UTF-8";
@import url(http://fonts.googleapis.com/css?family=Montserrat);
.flat {
  font-family: 'Montserrat';
  text-transform: uppercase;
  border: none;
  text-align: center;
  outline: none;
  cursor: pointer;
  color: #fafafa;
}
.flat.xs {
  padding: 3px 9px;
  font-size: 13px;
}
.flat.sm {
  padding: 9px 12px;
  font-size: 13px;
}
.flat.md {
  padding: 12px 15px;
  font-size: 13px;
}
.flat.lg {
  padding: 15px 24px;
  font-size: 15px;
}
.flat:active {
  position: relative;
  top: 2px;
}
.flat.grey {
  background-color: #5a5a5a;
  -webkit-box-shadow: 0px 3px 0px #484848;
  -moz-box-shadow: 0px 3px 0px #484848;
  box-shadow: 0px 3px 0px #484848;
}
.flat.grey:active {
  -webkit-box-shadow: 0px 1px 0px #5a5a5a;
  -moz-box-shadow: 0px 1px 0px #5a5a5a;
  box-shadow: 0px 1px 0px #5a5a5a;
}
.flat.grey:hover {
  background-color: #555555;
}
.flat.green {
  background-color: #0aa699;
  -webkit-box-shadow: 0px 3px 0px #08847a;
  -moz-box-shadow: 0px 3px 0px #08847a;
  box-shadow: 0px 3px 0px #08847a;
}
.flat.green:active {
  -webkit-box-shadow: 0px 1px 0px #0aa699;
  -moz-box-shadow: 0px 1px 0px #0aa699;
  box-shadow: 0px 1px 0px #0aa699;
}
.flat.green:hover {
  background-color: #099d91;
}
.flat.purple {
  background-color: #6a598d;
  -webkit-box-shadow: 0px 3px 0px #544770;
  -moz-box-shadow: 0px 3px 0px #544770;
  box-shadow: 0px 3px 0px #544770;
}
.flat.purple:active {
  -webkit-box-shadow: 0px 1px 0px #6a598d;
  -moz-box-shadow: 0px 1px 0px #6a598d;
  box-shadow: 0px 1px 0px #6a598d;
}
.flat.purple:hover {
  background-color: #645485;
}
.flat.navy-blue {
  background-color: #22262e;
  -webkit-box-shadow: 0px 3px 0px #1b1e24;
  -moz-box-shadow: 0px 3px 0px #1b1e24;
  box-shadow: 0px 3px 0px #1b1e24;
}
.flat.navy-blue:active {
  -webkit-box-shadow: 0px 1px 0px #22262e;
  -moz-box-shadow: 0px 1px 0px #22262e;
  box-shadow: 0px 1px 0px #22262e;
}
.flat.navy-blue:hover {
  background-color: #20242b;
}
.flat.pink {
  background-color: #f35958;
  -webkit-box-shadow: 0px 3px 0px #c24746;
  -moz-box-shadow: 0px 3px 0px #c24746;
  box-shadow: 0px 3px 0px #c24746;
}
.flat.pink:active {
  -webkit-box-shadow: 0px 1px 0px #f35958;
  -moz-box-shadow: 0px 1px 0px #f35958;
  box-shadow: 0px 1px 0px #f35958;
}
.flat.pink:hover {
  background-color: #e65453;
}
.flat.blue {
  background-color: #0090d9;
  -webkit-box-shadow: 0px 3px 0px #0073ad;
  -moz-box-shadow: 0px 3px 0px #0073ad;
  box-shadow: 0px 3px 0px #0073ad;
}
.flat.blue:active {
  -webkit-box-shadow: 0px 1px 0px #0090d9;
  -moz-box-shadow: 0px 1px 0px #0090d9;
  box-shadow: 0px 1px 0px #0090d9;
}
.flat.blue:hover {
  background-color: #0088ce;
}
.flat.yellow {
  background-color: #fdd01c;
  -webkit-box-shadow: 0px 3px 0px #caa616;
  -moz-box-shadow: 0px 3px 0px #caa616;
  box-shadow: 0px 3px 0px #caa616;
}
.flat.yellow:active {
  -webkit-box-shadow: 0px 1px 0px #fdd01c;
  -moz-box-shadow: 0px 1px 0px #fdd01c;
  box-shadow: 0px 1px 0px #fdd01c;
}
.flat.yellow:hover {
  background-color: #f0c51a;
}


Установка материала

Мы поможем установить данный материал к Вам на сайт


Добавил: YaVi | Категория: Кнопки и иконки | Просмотров: 1099


Поделиться в соц. сетях:

К данному материалу нет комментариев, но Вы можете стать первым, оставив свой комментарий!

Комментариев к материалу: 0
avatar