dr.Brain

doctor Brain

мир глазами веб-разработчика

CSS: кнопка в форме таблетки

делаем кнопку с закругленными краями с помощью CSS

dr.Brain

время чтения 1 мин.

Photo by Myriam Zilles on Unsplash

Сделать кнопку в форме таблетки или пилюли (кнопку со скругленными краями) можно, установив элементу button очень большое значение для свойства border-radius, которое, несомненно, должно быть больше высоты кнопки.

Пример:

button.btn {
    border-radius: 80px; /* значение должно значительно превышать высоту кнопки */
    padding: 20px 30px;
    background-color: #fdd835;
    border: none;
    color: black;
    font-size: 20px;
}

Не стоит забывать, что высота кнопки может увеличиваться при изменении дизайна. Поэтому, в большинсте случаев, для разработчика будет удобно устанавливать border-radius с очень большим значением, чтобы ваш CSS-эффект продолжал работать независимо от того, насколько увеличится высота кнопки.


Спасибо за внимание.

Новые публикации

Далее

Категории

О нас

Frontend & Backend. Статьи, обзоры, заметки, код, уроки.