mirror of
https://github.com/Oreolek/ifhub.club.git
synced 2024-07-03 06:55:03 +03:00
143 lines
4.9 KiB
CSS
143 lines
4.9 KiB
CSS
/* -------------------------------------------------------------------
|
|
|
|
КНОПКИ
|
|
|
|
|
|
Примеры использования:
|
|
|
|
<button class="button">Preview</button>
|
|
<a href="#" class="button">Preview</a>
|
|
|
|
<button class="button button-primary">Save</button>
|
|
|
|
------------------------------------------------------------------- */
|
|
|
|
.button {
|
|
display: inline-block;
|
|
|
|
padding: 3px 10px 6px;
|
|
*padding: 3px 10px 4px;
|
|
text-align: center;
|
|
|
|
border: 1px solid #dfe3e8;
|
|
border-radius: 5px;
|
|
|
|
font-size: 13px;
|
|
line-height: 15px;
|
|
|
|
color: #434343;
|
|
|
|
background: #fbfcfc;
|
|
background: -moz-linear-gradient(top, #fbfcfc 0%, #f0f2f5 100%);
|
|
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fbfcfc), color-stop(100%,#f0f2f5));
|
|
background: -webkit-linear-gradient(top, #fbfcfc 0%,#f0f2f5 100%);
|
|
background: -o-linear-gradient(top, #fbfcfc 0%,#f0f2f5 100%);
|
|
background: -ms-linear-gradient(top, #fbfcfc 0%,#f0f2f5 100%);
|
|
background: linear-gradient(top, #fbfcfc 0%,#f0f2f5 100%);
|
|
|
|
font-family: Verdana, sans-serif;
|
|
cursor: pointer;
|
|
text-decoration: none;
|
|
|
|
*margin-right: 5px;
|
|
}
|
|
.button:hover { text-decoration: none; background: #f0f2f5; }
|
|
.button:active {
|
|
-moz-box-shadow: 0 0 3px rgba(0, 0, 0, .3) inset;
|
|
-webkit-box-shadow: 0 0 3px rgba(0, 0, 0, .3) inset;
|
|
box-shadow: 0 0 3px rgba(0, 0, 0, .3) inset;
|
|
}
|
|
.button.fl-r { *margin-right: 0; }
|
|
|
|
|
|
/* Button Primary */
|
|
.button.button-primary {
|
|
background: #66cfff;
|
|
background: -moz-linear-gradient(top, #66cfff 0%, #2abcfe 100%);
|
|
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#66cfff), color-stop(100%,#2abcfe));
|
|
background: -webkit-linear-gradient(top, #66cfff 0%,#2abcfe 100%);
|
|
background: -o-linear-gradient(top, #66cfff 0%,#2abcfe 100%);
|
|
background: -ms-linear-gradient(top, #66cfff 0%,#2abcfe 100%);
|
|
background: linear-gradient(top, #66cfff 0%,#2abcfe 100%);
|
|
|
|
border: 1px solid #27ace8;
|
|
|
|
color: #fff;
|
|
}
|
|
.button.button-primary:hover { background: #2abcfe; }
|
|
|
|
|
|
/* Button Icon (Without text) */
|
|
.button.button-icon { padding: 7px 10px; }
|
|
|
|
|
|
/* Button Write */
|
|
.button.button-write {
|
|
background: #66cfff;
|
|
background: -moz-linear-gradient(top, #66cfff 0%, #2abcfe 100%);
|
|
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#66cfff), color-stop(100%,#2abcfe));
|
|
background: -webkit-linear-gradient(top, #66cfff 0%,#2abcfe 100%);
|
|
background: -o-linear-gradient(top, #66cfff 0%,#2abcfe 100%);
|
|
background: -ms-linear-gradient(top, #66cfff 0%,#2abcfe 100%);
|
|
background: linear-gradient(top, #66cfff 0%,#2abcfe 100%);
|
|
|
|
border: 1px solid #27ace8;
|
|
|
|
padding: 2px 15px 4px;
|
|
border-radius: 15px;
|
|
line-height: 17px;
|
|
|
|
color: #fff;
|
|
font-size: 11px;
|
|
}
|
|
.button.button-write:hover {
|
|
background: #4ec4ff;
|
|
background: -moz-linear-gradient(top, #4ec4ff 0%, #22b3fe 100%);
|
|
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#4ec4ff), color-stop(100%,#22b3fe));
|
|
background: -webkit-linear-gradient(top, #4ec4ff 0%,#22b3fe 100%);
|
|
background: -o-linear-gradient(top, #4ec4ff 0%,#22b3fe 100%);
|
|
background: -ms-linear-gradient(top, #4ec4ff 0%,#22b3fe 100%);
|
|
background: linear-gradient(top, #4ec4ff 0%,#22b3fe 100%);
|
|
|
|
box-shadow: 0 -1px 0 rgba(255, 255, 255, .5) inset;
|
|
}
|
|
|
|
|
|
/* Button Small */
|
|
.button.button-small { font-size: 11px; padding: 1px 7px 3px; }
|
|
|
|
|
|
/* Button Action */
|
|
.button.button-action {
|
|
border: none;
|
|
padding: 4px 4px 3px;
|
|
|
|
background: #c8f5ff;
|
|
background: -moz-linear-gradient(top, #c8f5ff 0%, #88c4ea 100%);
|
|
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#c8f5ff), color-stop(100%,#88c4ea));
|
|
background: -webkit-linear-gradient(top, #c8f5ff 0%,#88c4ea 100%);
|
|
background: -o-linear-gradient(top, #c8f5ff 0%,#88c4ea 100%);
|
|
background: -ms-linear-gradient(top, #c8f5ff 0%,#88c4ea 100%);
|
|
background: linear-gradient(top, #c8f5ff 0%,#88c4ea 100%);
|
|
}
|
|
.button.button-action span { display: none; }
|
|
.button.button-action:hover span { display: inline; padding: 0 5px 0 5px; position: relative; top: -2px; color: #fff; }
|
|
.button.button-action.active,
|
|
.button.button-action:hover {
|
|
border: 1px solid #2770e8;
|
|
box-shadow: 0 -1px 0 #128af3 inset, 0 2px 2px #ddd;
|
|
color: #fff;
|
|
padding: 3px 3px 2px;
|
|
|
|
background: #228dfa;
|
|
background: -moz-linear-gradient(top, #228dfa 0%, #0362eb 100%);
|
|
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#228dfa), color-stop(100%,#0362eb));
|
|
background: -webkit-linear-gradient(top, #228dfa 0%,#0362eb 100%);
|
|
background: -o-linear-gradient(top, #228dfa 0%,#0362eb 100%);
|
|
background: -ms-linear-gradient(top, #228dfa 0%,#0362eb 100%);
|
|
background: linear-gradient(top, #228dfa 0%,#0362eb 100%);
|
|
}
|
|
.button.button-action.button-action-add-friend:hover i { background-position: -147px -39px; }
|
|
.button.button-action.button-action-send-message:hover i { background-position: -163px -39px; }
|
|
.button.button-action.button-action-join.active i,
|
|
.button.button-action.button-action-join:hover i { background-position: -179px -39px; } |