Как сделать кнопку такой фигурой?
С помощью каких свойств можно сделать кнопку вот такой фигурой?
Я пробовал clip-path, но он съедает рамку, а нужно именно чтобы фигура была с рамкой
Дополнительно:
Замените рамку на drop-shadow
Или сделайте svg фоном
Или нарисуйте градиентом
clip-path. Как раз есть пример с анимацией:
snippet
clip-path правильный вариант, только нужно его использовать два раза. У основной кнопки фон цвета рамки, к ней применяется clip-path первый раз. Внутри кнопки ещё один элемент с фоном цвета основного фона кнопки, этот внутренний элемент должен быть на 1px (или больше если рамка шире) меньше с каждой стороны. К этому элементу применяется второй clip-path с теми же размерами.
Внутренний элемент можно сделать например через
position: absolute; top: 1px; left: 1px; right: 1px; bottom: 1px; |
position: absolute; top: 1px; left: 1px; right: 1px; bottom: 1px;
- Да, такой вариант кстати самый приемлемый, чё-то я сразу до него не догадался. Спасибо!
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для создания кнопки в форме фигуры в веб-разработке можно воспользоваться CSS и HTML. Вот пример кода, который покажет, как сделать кнопку в форме фигуры:
```html
.custom-button {
width: 100px;
height: 50px;
background-color: #007bff;
color: white;
border: none;
border-radius: 50%;
text-align: center;
font-size: 16px;
line-height: 50px;
cursor: pointer;
}
```
В данном примере мы создаем кнопку с классом "custom-button" и применяем к ней стили с помощью CSS. Чтобы кнопка была круглой, мы задаем радиус скругления границы равным 50%. Мы также устанавливаем фоновый цвет, цвет текста, размер шрифта и другие свойства, чтобы кнопка выглядела как фигура.
Вы можете настраивать размер, цвет, шрифт и другие свойства кнопки, чтобы она соответствовала вашим потребностям. Таким образом, вы можете создать уникальную и стильную кнопку в форме фигуры для вашего веб-сайта.