» »

Красивые разноцветные кнопки ZR


Красивые разноцветные кнопки ZR

Красивые разноцветные кнопки для вашего сайта. Кнопки созданы на чистом CSS и когда на них наводишь курсор то они как будто немного поднимаются. Что смотрится очень красиво. Их можно поставить на сайт там где вы и по вашему мнению они должны быть. Созданы под разные стили и оттенка цвета что подойдут к любому интернет ресурсу а точнее к его дизайн сайту. Так же представлено DEMO где вы сможете посмотреть их в работе и как они вообще выполняют действие.

Установка:

Ставим в CSS:

Код
input[type="button"],input[type="submit"],input[type="reset"]{
background:#13ef4a;
padding:7px 12px;
outline:none;
border:none;
border-radius:3px;
color:#404040;
font:13px tahoma;
transition:all 0.2s ease-in-out;
-webkit-transition:all 0.2s ease-in-out;
-moz-transition:all 0.2s ease-in-out;
-o-transition:all 0.2s ease-in-out;
box-shadow:inset 0 -3px 0 transparent;
margin-right:10px;
}
input[type="button"]:hover,input[type="submit"]:hover,input[type="reset"]:hover{
cursor:pointer;
box-shadow:inset 0 -3px 0 #13c040;
-webkit-box-shadow:inset 0 -3px 0 #13c040;
-o-box-shadow:inset 0 -3px 0 #13c040;
-moz-box-shadow:inset 0 -3px 0 #13c040;
transition:all 0.2s ease-in-out;
-webkit-transition:all 0.2s ease-in-out;
-moz-transition:all 0.2s ease-in-out;
-o-transition:all 0.2s ease-in-out;
}
input[type="button"]:active,input[type="submit"]:active,input[type="reset"]:active{
cursor:pointer;
box-shadow:inset 0 2px 0 #13c040;
-o-box-shadow:inset 0 2px 0 #13c040;
-moz-box-shadow:inset 0 2px 0 #13c040;
-webkit-box-shadow:inset 0 2px 0 #13c040;
}


Это основа, далее выбираем нужный вам цвет и снова вставляем в CSS:

Зелёный:

Код
input[type="button"],input[type="submit"],input[type="reset"]{  
background:#47BEFF !important;  
}  
input[type="button"]:hover,input[type="submit"]:hover,input[type="reset"]:hover{  
box-shadow:inset 0 -3px 0 #478Ef0 !important;  
-o-box-shadow:inset 0 -3px 0 #478Ef0 !important;  
-moz-box-shadow:inset 0 -3px 0 #478Ef0 !important;  
-webkit-box-shadow:inset 0 -3px 0 #478Ef0 !important;  
}  
input[type="button"]:active,input[type="submit"]:active,input[type="reset"]:active{  
box-shadow:inset 0 2px 0 #478Ef0 !important;  
-o-box-shadow:inset 0 2px 0 #478Ef0 !important;  
-moz-box-shadow:inset 0 2px 0 #478Ef0 !important;  
-webkit-box-shadow:inset 0 2px 0 #478Ef0 !important;  
}


Синий:

Код
input[type="button"],input[type="submit"],input[type="reset"]{  
background:#FF5D3D !important;  
}  
input[type="button"]:hover,input[type="submit"]:hover,input[type="reset"]:hover{  
box-shadow:inset 0 -3px 0 #da5D3D !important;  
-o-box-shadow:inset 0 -3px 0 #da5D3D !important;  
-moz-box-shadow:inset 0 -3px 0 #da5D3D !important;  
-webkit-box-shadow:inset 0 -3px 0 #da5D3D !important;  
}  
input[type="button"]:active,input[type="submit"]:active,input[type="reset"]:active{  
box-shadow:inset 0 2px 0 #db5D3D !important;  
-o-box-shadow:inset 0 2px 0 #db5D3D !important;  
-moz-box-shadow:inset 0 2px 0 #db5D3D !important;  
-webkit-box-shadow:inset 0 2px 0 #db5D3D !important;  
}


Красный:

Код
input[type="button"],input[type="submit"],input[type="reset"]{  
background:#cacaca !important;  
}  
input[type="button"]:hover,input[type="submit"]:hover,input[type="reset"]:hover{  
box-shadow:inset 0 -3px 0 #b5b5b5 !important;  
-o-box-shadow:inset 0 -3px 0 #b5b5b5 !important;  
-moz-box-shadow:inset 0 -3px 0 #b5b5b5 !important;  
-webkit-box-shadow:inset 0 -3px 0 #b5b5b5 !important;  
}  
input[type="button"]:active,input[type="submit"]:active,input[type="reset"]:active{  
box-shadow:inset 0 2px 0 #b5b5b5 !important;  
-o-box-shadow:inset 0 2px 0 #b5b5b5 !important;  
-moz-box-shadow:inset 0 2px 0 #b5b5b5 !important;  
-webkit-box-shadow:inset 0 2px 0 #b5b5b5 !important;  
}


Серый:

Код
input[type="button"],input[type="submit"],input[type="reset"]{  
background:#13ef4a !important;  
}  
input[type="button"]:hover,input[type="submit"]:hover,input[type="reset"]:hover{  
box-shadow:inset 0 -3px 0 #13c040;  
-webkit-box-shadow:inset 0 -3px 0 #13c040;  
-o-box-shadow:inset 0 -3px 0 #13c040;  
-moz-box-shadow:inset 0 -3px 0 #13c040;  
}  
input[type="button"]:active,input[type="submit"]:active,input[type="reset"]:active{  
box-shadow:inset 0 2px 0 #13c040;  
-o-box-shadow:inset 0 2px 0 #13c040;  
-moz-box-shadow:inset 0 2px 0 #13c040;  
-webkit-box-shadow:inset 0 2px 0 #13c040;  
}


Тёмный:

Код
input[type="button"],input[type="submit"],input[type="reset"]{  
background:#404040 !important;  
color:#efefef !important;  
}  
input[type="button"]:hover,input[type="submit"]:hover,input[type="reset"]:hover{  
box-shadow:inset 0 -3px 0 #202020 !important;  
-o-box-shadow:inset 0 -3px 0 #202020 !important;  
-moz-box-shadow:inset 0 -3px 0 #202020 !important;  
-webkit-box-shadow:inset 0 -3px 0 #202020 !important;  
}  
input[type="button"]:active,input[type="submit"]:active,input[type="reset"]:active{  
box-shadow:inset 0 2px 0 #202020 !important;  
-o-box-shadow:inset 0 2px 0 #202020 !important;  
-moz-box-shadow:inset 0 2px 0 #202020 !important;  
-webkit-box-shadow:inset 0 2px 0 #202020 !important;  
}


Демонстрация
21.12.2013 Просмотров: 1827 Комментарий: (4)

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

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

Комментарий: 4
Kosten
Kosten 21.12.2013 23:521
0
Supermenыч, ты замутил эти кнопки?
๖ۣۜInspire
๖ۣۜInspire 21.12.2013 23:592
0
Kosten, да
Kosten
Kosten 22.12.2013 00:043
0
Supermenыч, что сказать, с возвращением, вдохновение пришло. То в последнее время не было от тебя не чего)
Kosten
Kosten 22.12.2013 12:164
0
Как вам кнопки? Смотрим на демо в статье.
avatar