Округлые CSS кнопки

Css позволяет в некоторых случаях заменить собой достаточно тяжелые графические файлы, к примеру кнопки не обязательно отрисовывать в редакторах а вполне можно заменить набором кода. Вот несколько кнопок сделанных на css3

Кнопки представлены в двух вариантах, первая графический файл, вторая копия этой кнопки с помощью css кода. В принципе можете использовать тот вариант который вам больше нравится. 

1. Оранжевая округлая кнопка css

button1 {
width: 200px;
height: 50px;
-webkit-border-radius: 25px;
-moz-border-radius: 25px;
border-radius: 25px;
background-color: #000;
-webkit-box-shadow: 0 2px 2px rgba(0,0,0,.75), inset 0 -5px rgba(138,85,1,.75);
-moz-box-shadow: 0 2px 2px rgba(0,0,0,.75), inset 0 -5px rgba(138,85,1,.75);
box-shadow: 0 2px 2px rgba(0,0,0,.75), inset 0 -5px rgba(138,85,1,.75);
background-image: -webkit-linear-gradient(bottom, #ea8615, #f6ad39 65%, #fbc357);
background-image: -moz-linear-gradient(bottom, #ea8615, #f6ad39 65%, #fbc357);
background-image: -o-linear-gradient(bottom, #ea8615, #f6ad39 65%, #fbc357);
background-image: -ms-linear-gradient(bottom, #ea8615, #f6ad39 65%, #fbc357);
background-image: linear-gradient(to top, #ea8615, #f6ad39 65%, #fbc357);
}

2. Синяя округлая кнопка css

button2 {
width: 200px;
height: 50px;
-webkit-border-radius: 25px;
-moz-border-radius: 25px;
border-radius: 25px;
background-color: #00aeef;
-webkit-box-shadow: 0 2px 2px rgba(0,0,0,.75), inset 0 0 5px rgba(204,255,255,.75);
-moz-box-shadow: 0 2px 2px rgba(0,0,0,.75), inset 0 0 5px rgba(204,255,255,.75);
box-shadow: 0 2px 2px rgba(0,0,0,.75), inset 0 0 5px rgba(204,255,255,.75);
background-image: -webkit-linear-gradient(bottom, #005fa6, #1c8de9 65%, #3a9cee);
background-image: -moz-linear-gradient(bottom, #005fa6, #1c8de9 65%, #3a9cee);
background-image: -o-linear-gradient(bottom, #005fa6, #1c8de9 65%, #3a9cee);
background-image: -ms-linear-gradient(bottom, #005fa6, #1c8de9 65%, #3a9cee);
background-image: linear-gradient(to top, #005fa6, #1c8de9 65%, #3a9cee);
}

3. Вдавленная округлая кнопка css

button3 {
width: 200px;
height: 50px;
-webkit-border-radius: 25px;
-moz-border-radius: 25px;
border-radius: 25px;
background-color: #9e0b0f;
-webkit-box-shadow: 0 1px #fff, inset 0 2px 3px rgba(0,0,0,.75);
-moz-box-shadow: 0 1px #fff, inset 0 2px 3px rgba(0,0,0,.75);
box-shadow: 0 1px #fff, inset 0 2px 3px rgba(0,0,0,.75);
background-image: -webkit-linear-gradient(bottom, #4e0101, #b20808 65%, #cb0909);
background-image: -moz-linear-gradient(bottom, #4e0101, #b20808 65%, #cb0909);
background-image: -o-linear-gradient(bottom, #4e0101, #b20808 65%, #cb0909);
background-image: -ms-linear-gradient(bottom, #4e0101, #b20808 65%, #cb0909);
background-image: linear-gradient(to top, #4e0101, #b20808 65%, #cb0909);
}

4. Яркая округлая кнопка css

buttom4 {
width: 200px;
height: 50px;
-webkit-border-radius: 25px;
-moz-border-radius: 25px;
border-radius: 25px;
background-color: #ff0;
-webkit-box-shadow: 0 15px rgba(255,204,153,.7), inset 0 1px #fff, inset 0 0 6px rgba(255,181,0,.3);
-moz-box-shadow: 0 15px rgba(255,204,153,.7), inset 0 1px #fff, inset 0 0 6px rgba(255,181,0,.3);
box-shadow: 0 15px rgba(255,204,153,.7), inset 0 1px #fff, inset 0 0 6px rgba(255,181,0,.3);
background-image: -webkit-linear-gradient(bottom, #feb602, #fdfe03 75%);
background-image: -moz-linear-gradient(bottom, #feb602, #fdfe03 75%);
background-image: -o-linear-gradient(bottom, #feb602, #fdfe03 75%);
background-image: -ms-linear-gradient(bottom, #feb602, #fdfe03 75%);
background-image: linear-gradient(to top, #feb602, #fdfe03 75%);
}

Кстати с помощью замены значений, вы можете настроить эти кнопки для своих нужд.

Спасибо за внимание, если что то непонятно спрашивайте в комментариях.