CSS: кнопка в форме таблетки
делаем кнопку с закругленными краями с помощью CSS
Сделать кнопку в форме таблетки или пилюли (кнопку со скругленными краями) можно, установив элементу button
очень большое значение для свойства border-radius
, которое, несомненно, должно быть больше высоты кнопки.
Пример:
button.btn {
border-radius: 80px; /* значение должно значительно превышать высоту кнопки */
padding: 20px 30px;
background-color: #fdd835;
border: none;
color: black;
font-size: 20px;
}
Не стоит забывать, что высота кнопки может увеличиваться при изменении дизайна. Поэтому, в большинсте случаев, для разработчика будет удобно устанавливать border-radius
с очень большим значением, чтобы ваш CSS-эффект продолжал работать независимо от того, насколько увеличится высота кнопки.
Спасибо за внимание.