Круглые CSS кнопки | Стили CSS кнопок (2)


Здравствуйте, в этой публикации представлены четыре круглые кнопки, выполненные на CSS и HTML, без использования картинок и фотошопа. Если пофантазировать, то можно найти применение этим кнопкам. Я решил опубликовать и показать вам их, потому — что мне самому они очень понравились. Смотрятся, конечно эти CSS кнопки довольно — таки эффективно и привлекательно.


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

HTML код кнопок

Синяя кнопка :

<a class="btn-blue" href="#"></a>

Красная кнопка :

<a class="btn-red" href="#"></a>

Зеленая кнопка :

<a class="btn-green" href="#"></a>

Желтая кнопка :

<a class="btn-yellow" href="#"></a>

Стили CSS кнопок

Синяя кнопка :

.btn-blue {
background: #108FE8;
border: 3px solid #fff;
border-radius: 100%;
box-shadow: 0 -2px 0 3px #0d72b8 inset, 0 5px 5px rgba(3, 25, 41, 0.17), 0 15px rgba(255, 255, 255, 0.25) inset;
cursor: pointer;
display: inline-block;
height: 75px;
width: 75px;
}
.btn-blue:hover {
background: #333;
box-shadow: 0 -2px 0 3px #1a1a1a inset, 0 5px 5px rgba(0, 0, 0, 0.17), 0 15px rgba(255, 255, 255, 0.32) inset;
}

Красная кнопка :

.btn-red {
background: #E53030;
border: 3px solid #fff;
border-radius: 100%;
box-shadow: 0 -2px 0 3px #c91919 inset, 0 5px 5px rgba(65, 8, 8, 0.17), 0 15px rgba(255, 255, 255, 0.25) inset;
cursor: pointer;
display: inline-block;
height: 75px;
width: 75px;
}
.btn-red:hover {
background: #333;
box-shadow: 0 -2px 0 3px #1a1a1a inset, 0 5px 5px rgba(0, 0, 0, 0.17), 0 15px rgba(255, 255, 255, 0.32) inset;
}

Зеленая кнопка :

.btn-green {
background: #0EC518;
border: 3px solid #fff;
border-radius: 100%;
box-shadow: 0 -2px 0 3px #0b9512 inset, 0 5px 5px rgba(0, 7, 1, 0.17), 0 15px rgba(255, 255, 255, 0.25) inset;
cursor: pointer;
display: inline-block;
height: 75px;
width: 75px;
}
.btn-green:hover {
background: #333;
box-shadow: 0 -2px 0 3px #1a1a1a inset, 0 5px 5px rgba(0, 0, 0, 0.17), 0 15px rgba(255, 255, 255, 0.32) inset;
}

Желтая кнопка :

.btn-yellow {
background: #FFC334;
border: 3px solid #fff;
border-radius: 100%;
box-shadow: 0 -2px 0 3px #ffb401 inset, 0 5px 5px rgba(103, 73, 0, 0.17), 0 15px rgba(255, 255, 255, 0.25) inset;
cursor: pointer;
display: inline-block;
height: 75px;
width: 75px;
}
.btn-yellow:hover {
background: #333;
box-shadow: 0 -2px 0 3px #1a1a1a inset, 0 5px 5px rgba(0, 0, 0, 0.17), 0 15px rgba(255, 255, 255, 0.32) inset;
}

— Для тех, кто не знает как поставить эти круглые кнопки CSS, небольшой инструктаж:

Копируйте нужные стили CSS кнопок и добавляйте их в самое окончание файла style.css своей темы. И потом, перед публикацией записи останется только добавить HTML код кнопки, естественно вставив свою ссылку вместо знака #, в любое место будующей статьи.


Похожие по Тегам статьи


2 thoughts on “Круглые CSS кнопки | Стили CSS кнопок (2)

  1. Андрей

    Недавно нужно было сделать как раз такие (ну разве что немного более сложные). CSS тогда неосилил, пришлось фотошопить…
    пожалуй, добавлю в закладочки)

    1. Егор Автор записи

      Согласен, код совсем не сложный. К ним можно добавить, к примеру, иконки. Я в лэндинге их применял, там картинки были круглые, как раз и кнопки подошли.