» »

Разноцветные кнопки на CSS для сайта


Разноцветные кнопки на CSS для сайта

По дизайну красиво созданы кнопки которые полностью на стилях CSS. И предназначены для сайта системы ucoz, полностью код проверен и рабочий.
Что понравилось из кнопок можно сделать как разделы или вообще меню сайта если ваш дизайн сайта позволяет.
Так же они могут быть меньше и шире это все зависит от стилей про которые я вам хочу рассказать как их регулировать.
Просто в начале стилей идет скажем вот этот код
Код
.butfr2 {-moz-transition: all 0.3s ease 0s;-moz-box-sizing: border-box;border-radius: 3px 3px 3px 3px;box-shadow: 0 1px 3px rgba(0, 0, 0, 0.43);color: #FFFFFF;cursor: pointer;display: inline-block;font-family: Calibri,'Trebuchet MS',Verdana,Geneva,Arial,Helvetica,sans-serif;font-size: 12px;font-style: normal;height: 26px;line-height: 26px;outline: medium none;width: 243px;padding: 0 6px;text-align: center;}

Где - 243px это длина которую можно регулировать.
Где - 12px это шрифт делать меньше и больше.
Но остальное вы сами все узнаете как поменять цвет кнопки. Коротко о замене цветового оттенка кнопки.
Код
{background-color: #084ca9;

Цвет меняем, если вам нужна еще больше кнопок вам просто стоит добавить стили.
Теперь сам код.
Ставим там где по вашему мнению они должны стоять. В бок сайта их не нужно прописывать просто прописываем код
Код
<a href="http://zornet.ru/"><input value="Чёрная кнопка" class="butfr2 blackur" type="submit"></a>
<a href="http://zornet.ru/"><input value="Желатя кнопка" class="butfr2 oranger" type="submit"></a>  
<a href="http://zornet.ru/"><input value="Зелёная кнопка" class="butfr2 greenur" type="submit"></a>

И идем в CSS и вставляем стили и только там мы можем регулировать кнопки а то есть изменять как вам угодно.
Код
/* Button Rikudo*/  
.butfr2 {-moz-transition: all 0.3s ease 0s;-moz-box-sizing: border-box;border-radius: 3px 3px 3px 3px;box-shadow: 0 1px 3px rgba(0, 0, 0, 0.43);color: #FFFFFF;cursor: pointer;display: inline-block;font-family: Calibri,'Trebuchet MS',Verdana,Geneva,Arial,Helvetica,sans-serif;font-size: 12px;font-style: normal;height: 26px;line-height: 26px;outline: medium none;width: 243px;padding: 0 6px;text-align: center;}  
a.butfr2 {color: #FFFFFF;display: inline-block;}  

.blackur {background: url("http://zornet.ru/CSS-ZORNET/REN/highlight_buttom2.png") repeat-x scroll center top #323232;text-shadow: 0 -1px 0 #2B2B2B;border: 1px solid #2B2B2B;}  
.blackur:hover {background-color: #555;color: white;text-decoration: none;}  
.blackur:active {background-color: #242424;color: #FFFFFF;outline: 0 none;}  

.greenur {background: url("http://zornet.ru/CSS-ZORNET/REN/highlight_buttom2.png") repeat-x scroll center top #7BA60D;text-shadow: 0 -1px 0 #8CAD36;border: 1px solid #54951F;}  
.greenur:hover {background-color: #6C910C; border: 1px solid #54951F; color: #FFFFFF;text-decoration: none;}  
.greenur:active {background-color: #6C910C; border: 1px solid #54951F; color: #FFFFFF;outline: 0 none;}  

.oranger {background: url("http://zornet.ru/CSS-ZORNET/REN/highlight_buttom2.png") repeat-x scroll center top #084ca9;text-shadow: 0 -1px 0 #084ca9;border: 1px solid #084ca9;}  
.oranger:hover {background-color: #084ca9; border: 1px solid #084ca9; color: #FFFFFF;text-decoration: none;}  
.oranger:active {background-color: #F3970C; border: 1px solid #084ca9; color: #FFFFFF;outline: 0 none;}  
/* Button Rikudo*/
17.12.2013 Просмотров: 837 Комментарий: (8)

Поделиться в социальных сетях

Материал разместил

Комментарий: 8
Delete
Delete 18.12.2013 12:341
0
интересно...у кого со зрением так плохо ?
Kosten
Kosten 18.12.2013 13:472
0
N_O_O_B, в чем прикол..
Delete
Delete 18.12.2013 14:053
0
Kosten
Kosten 18.12.2013 14:114
0
N_O_O_B, больше для дизайна они.
Delete
Delete 18.12.2013 14:245
0
Kosten, тогда понятно...ты внимательно посмотри на эти кнопки...
Kosten
Kosten 18.12.2013 14:386
0
N_O_O_B, нормальные.. вот на форум поставил. Дизайн отличный.
Kosten
Kosten 18.12.2013 14:397
0
А что написана желтая кнопка, просто я сделал ее синей.
Delete
Delete 18.12.2013 15:138
0
Kosten, да...я уже думал что у меня с будуна зрение испортилось...
avatar