Овальная кнопка с помощью CSS
Нашел на просторах сети интересную овальную кнопку, которая построена только на 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.
В таблице все, кроме буквы «Ё» — у нее кодировка в порядок не вписывается —…
Для ввода в HTML документ символов, которые отсутствуют на клавиатуре или которые имеют в синтаксисе…
Отключить кнопку отправки, если поле пустое Javascript Второй вариант для проверки поля
Вы можете создать круговую диаграмму в HTML, используя простую функцию CSS под названием conic-gradient. Во-первых, мы добавляем <div> элемент…
1 комментарий
Ответить
Красивая кнопка. Четко видно нажатие.