Овальная кнопка с помощью 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.

Перевод кириллицы в UTF-8

В таблице все, кроме буквы «Ё» — у нее кодировка в порядок не вписывается —…

Текстовые подстановки в HTML

Для ввода в HTML документ символов, которые отсутствуют на клавиатуре или которые имеют в синтаксисе…

Скрипт для вычисления суммы всех полей

Пример, как сделать скрипт для суммы всех полей. При вводе в поле данных идет моментальный…

Как скачать шрифты Google fonts

Как скачать Google шрифты, чтобы использовать их локально? Иногда нужно, чтобы сборка проекта была изолирована…

1 комментарий

Красивая кнопка. Четко видно нажатие.

Ответить