Готовый набор разноцветных CSS кнопок в стиле Flat
827материалов
228тем на форуме
3004комментария
6161пользователь

Готовый набор разноцветных 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;     
}

ЗАКАЗАТЬ УСТАНОВКУ

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

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

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


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