13.06.2013
Нашел на просторах сети интересную овальную кнопку, которая построена только на CSS3 без использования графических изображений.
Создание красивой овальной кнопки без использования графических картинок.
Код HTML для овальной кнопки:
<a href="#" class="btn btn-oval">Download</a>
Для того, чтобы не прописывать вручную все вендорные префиксы, можно использовать скрипт prefixfree.min.js, который обработает и добавит необходимые префиксы в файлах css на стороне клиента:
<script src="http://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.6/prefixfree.min.js"></script>
Используем такие стили для овальной кнопки на CSS:
.btn-oval { display: inline-block; width: 240px; height: 70px; box-sizing: border-box; text-align: center; color: #fff; text-decoration: none; background: linear-gradient(#89c13e, #599c02); background-color: #6fad1d; border-radius: 35px; border: 1px solid #579a00; font: bold 30px/70px Arial; box-shadow: inset 0 2px 2px #cce464, inset 1px 0 3px #b2dc2d, inset -1px 0 3px #b2dc2d, inset 0 -2px 2px #89d301, 0 0 3px rgba(0, 0, 0, 0.24); position: relative; text-shadow: 0 1px #45880d; outline: none; } .btn-oval:before { content: ""; position: absolute; top: -10px; left: -10px; width: 100%; height: 100%; padding: 10px; background: #d7d7d7; z-index: -1; border-radius: 50px; box-shadow: inset 0 1px 2px #bbb; } .btn-oval:hover { background: linear-gradient(#97d444, #65ad07); box-shadow: inset 0 1px 0 #e2f498, inset 0 2px 0 #ceec87, inset 0 3px 0 #c3e67c, inset 0 5px 0 #bae475, inset 1px 0 3px #b2dc2d, inset -1px 0 3px #b2dc2d, inset 0 -2px 2px #89d301, 0 0 3px rgba(0, 0, 0, 0.24); } .btn-oval:active { background: linear-gradient(#83bb37, #599c02); box-shadow: inset 0 3px 7px #3c7b00; padding: 1px 0 0 1px; }
Рабочий пример овальной кнопки на CSS (кликабельно):
See the Pen Oval button with shadow on CSS by Denis (@deniscreative) on CodePen.0
Источник уже не помню, но вроде бы Dimox.
Один комментарий к “Овальная кнопка с помощью CSS”
Eugene
Красивая кнопка. Четко видно нажатие.