Создание кнопки на чистом css

Я пытаюсь создать такую кнопку:

Это нужно делать на чистом css.

Пробовал делать, ничего не получилось, работает некорректно:

display: inline-block;
width: 165px;
text-align: center;
color: #fff;
background: linear-gradient(180deg, #4b3529 21%, #4c2e1a 100%);
border-radius: 5px;
border: 1px solid #ffffff;
font-family: Arial;
font-weight: normal;
border-left: 2px solid #e5ccaf;
border-image: linear-gradient(to bottom, #ffd400,rgba(0, 0, 0, 0)) 0 100%;
border-top: 1px solid #ffd400;

Создание кнопки на чистом css
Как мне это сделать?!

Эй, трудно увидеть именно то, что вы ищете на изображениях. Вам нужны желтоватые рамки или эффект градиента на фоне кнопки? Может быть, вы можете дать источник оригинальной кнопки. Также вам может понадобиться показать HTML, так как копирование вашего кода дало мне желаемый результат.

— 18.11.2022 07:44

css

18.11.2022 07:39

Приемы CSS-макетирования - floats и Flexbox

Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

CSS: FlexBox

Ранее разработчики использовали макеты с помощью Position и Float. После появления flexbox сценарий полностью изменился.

Перейти к ответу Данный вопрос помечен как решенный

Ответы 3

можно использовать body::after content "text" и стилизовать его

18.11.2022 07:45

Вы можете добавить свойства CSS внутри класса. Затем добавьте класс в элемент HTML со свойством `text-decoration: none;` следующим образом:

.pure_css_button {
  display: inline-block;
  width: 165px;
  text-align: center;
  color: #fff;
  text-decoration: none;
  background: linear-gradient(180deg, #4b3529 21%, #4c2e1a 100%);
  border-radius: 5px;
  border: 1px solid #ffffff;
  font-family: Arial;
  font-weight: normal;
  border-left: 2px solid #e5ccaf;
  border-image: linear-gradient(to bottom, #ffd400, rgba(0, 0, 0, 0)) 0 100%;
  border-top: 1px solid #ffd400;
}

<a href = "#" class = "pure_css_button">
Button</a>

18.11.2022 07:45

Ответ принят как подходящий

button {
            cursor: pointer;
            font-size: x-large;
            padding: 0.6rem 2rem;
            font-weight: bold;
            overflow: hidden;
            color: #fff;
            background: linear-gradient(180deg, #4b3529 21%, #4c2e1a 100%);
            border:0;
            border-radius: .3rem;
            position: relative;
            border-top: 2px solid hsl(24, 49%, 15%);
            border-bottom: 2px solid hsl(24, 49%, 15%);
        }
        button::after,button::before{
            content: '';
            height: 100%;
            width: .15rem;
            position: absolute;
            top:0;
            background:linear-gradient(to bottom, #ffd400, rgba(0, 0, 0, 0)) ;
        }
        button::before{
            left: 0;
        }
        button::after{
            right: 0;
        }