Создание кнопки на чистом 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;

Как мне это сделать?!

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

— 18.11.2022 07:44

css

18.11.2022 07:39

Как настроить Tailwind CSS с React.js и Next.js?

Tailwind CSS - единственный фреймворк, который, как я убедился, масштабируется в больших командах. Он легко настраивается, адаптируется к любому...

Создайте титры как в звездных войнах с помощью CSS и Javascript

Если вы веб-разработчик (или хотите им стать), то вы наверняка гик и вам нравятся "Звездные войны". А как бы вы хотели, чтобы фоном для вашего...

Начала с розового дизайна

Pink Design - это система дизайна Appwrite с открытым исходным кодом для создания последовательных и многократно используемых пользовательских...

Анимация SVG-узоров без единой строки CSS

Недавно я работал над веб-проектом, который позволил мне поэкспериментировать с шаблонами SVG. С SVG очень приятно работать, как только вы получите...

Неделя 1 - Карточки с временной шкалой

Поскольку это была первая неделя, я решил начать с простого. Предполагалось, что у меня будет временная шкала с несколькими карточками, которые можно...

8 репозиториев GitHub, о которых должен знать каждый веб-разработчик

Здесь представлена дополнительная информация о восьми репозиториях GitHub, о которых должен знать каждый веб-разработчик:

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

Ответы 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;
        }