Овальная кнопка с помощью CSS

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.

Полезная инфа:

Оставить комментарий