Создаем красивые кнопки при помощи CSS. Пример кнопок:
Вариант 1 Вариант 2
Создаем следующий html-код:
<a href=»#»>Вариант 1</a> <a href=»#»>Вариант 2</a>
и CSS для него
<style>
.a_cat:hover {
padding:7px 20px 7px 20px;
top:1px;
color:#fff;
background-image: linear-gradient(bottom, rgb(62,184,229) 0%, rgb(44,160,202) 100%);
background-image: -o-linear-gradient(bottom, rgb(62,184,229) 0%, rgb(44,160,202) 100%);
background-image: -moz-linear-gradient(bottom, rgb(62,184,229) 0%, rgb(44,160,202) 100%);
background-image: -webkit-linear-gradient(bottom, rgb(62,184,229) 0%, rgb(44,160,202) 100%);
background-image: -ms-linear-gradient(bottom, rgb(62,184,229) 0%, rgb(44,160,202) 100%);
background-image: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0, rgb(62,184,229)),
color-stop(1, rgb(44,160,202))
);
}
.a_cat {
background-color:#3bb3e0;
padding:7px 20px 7px 20px;
position:relative;
font-family: 'Open Sans', sans-serif;
font-size:13px;
text-decoration:none;
color:#fff;
border: solid 1px #186f8f;
background-image: linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%);
background-image: -o-linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%);
background-image: -moz-linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%);
background-image: -webkit-linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%);
background-image: -ms-linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%);
background-image: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0, rgb(44,160,202)),
color-stop(1, rgb(62,184,229))
);
-webkit-box-shadow: inset 0px 1px 0px #7fd2f1, 0px 1px 0px #fff;
-moz-box-shadow: inset 0px 1px 0px #7fd2f1, 0px 1px 0px #fff;
box-shadow: inset 0px 1px 0px #7fd2f1, 0px 1px 0px #fff;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-o-border-radius: 5px;
border-radius: 5px;
}
.a_active:hover {
padding:7px 20px 7px 20px;
top:1px;
color:#fff;
background-image: linear-gradient(bottom, rgb(255,171,49) 0%, rgb(253,150,0) 100%);
background-image: -o-linear-gradient(bottom, rgb(255,171,49) 0%, rgb(253,150,0) 100%);
background-image: -moz-linear-gradient(bottom, rgb(255,171,49) 0%, rgb(253,150,0) 100%);
background-image: -webkit-linear-gradient(bottom, rgb(255,171,49) 0%, rgb(253,150,0) 100%);
background-image: -ms-linear-gradient(bottom, rgb(255,171,49) 0%, rgb(253,150,0) 100%);
background-image: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0, rgb(255,171,49) ),
color-stop(1, rgb(253,150,0))
);
}
.a_active {
background-color:#3bb3e0;
padding:7px 20px 7px 20px;
position:relative;
font-family: 'Open Sans', sans-serif;
font-size:13px;
text-decoration:none;
color:#fff;
border: solid 1px #8f6c18;
background-image: linear-gradient(bottom, rgb(253,150,0) 0%, rgb(255,171,49) 100%);
background-image: -o-linear-gradient(bottom, rgb(253,150,0) 0%, rgb(255,171,49) 100%);
background-image: -moz-linear-gradient(bottom, rgb(253,150,0) 0%, rgb(255,171,49) 100%);
background-image: -webkit-linear-gradient(bottom, rgb(253,150,0) 0%, rgb(255,171,49) 100%);
background-image: -ms-linear-gradient(bottom, rgb(253,150,0) 0%, rgb(255,171,49) 100%);
background-image: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0, rgb(253,150,0)),
color-stoprgb(255,171,49) )
);
-webkit-box-shadow: inset 0px 1px 0px #f1ca7f, 0px 1px 0px #fff;
-moz-box-shadow: inset 0px 1px 0px #f1ca7f, 0px 1px 0px #fff;
box-shadow: inset 0px 1px 0px #f1ca7f, 0px 1px 0px #fff;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-o-border-radius: 5px;
border-radius: 5px;
}
</style>
еще один прикольный стиль, который можно использовать для имитации кнопок клавиатуры:
.kbd {
border-color: #A9A9A9 #8C8C8C #C6C6C6 #C0C0C0;
border-radius: 5px;
border-style: solid;
border-width: 1px 1px 3px;
box-shadow: -1px 1px 1px #484848, 1px 1px 1px #484848;
font-family: "Courier New",Courier,monospace;
font-size: 12px;
padding: 2px 6px;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
text-transform: capitalize;
}Выглядеть будет примерно вот так
Ctrl + Shift + Delete