Закругленная кнопка с градиентом

Question

Закругленная кнопка с градиентом

Рейтинг: 0Ответов: 2Опубликовано: 06.05.2023

Всем привет! Не могу сверстать кнопку чтобы она была закругленная, да еще и с градиентым бордером, может кто-то такое реализовал и мог бы поделиться, был бы благородный, ниже пример кнопки которая должна получиться и код который пока что есть

Код:

&__btn {
        border-radius: 15px;
        font-weight: 600;
        padding: 15px 26px;
        border: 2px solid;
        border-image: repeating-linear-gradient(45deg, #f33, #3bf, #f33 30px) 60;
        color: transparent;    
        -webkit-background-clip: text;
        background-clip: text;
        background-image: linear-gradient(88.01deg, #730000 -9.57%, #FF0000 115.37%);
        border: 2px solid transparent;
    }

<button class="example__btn">Открыть галерею</button>

css html button вёрстка

Источник: Stack Overflow на русском

Answer 1

▲ 3

У меня получилось что-то такое:

@import url('https://fonts.googleapis.com/css?family=Roboto');

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Roboto';
}

.gradient-btn {
  --border-width: 4px;
  --gradient: -webkit-linear-gradient(0deg, rgb(130, 0, 0), rgb(240, 10, 10));

  display: inline-block;
  padding: 1em 2em;
  border-radius: 1.2em;
  font-size: 16px;
  background: rgb(255, 255, 255);
  background-clip: padding-box;
  border: solid var(--border-width) transparent;
  position: relative;
  cursor: pointer;
}

.gradient-btn::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
  border-radius: inherit;
  margin: calc(var(--border-width) * -1);
  background-image: var(--gradient);
}

.gradient-btn p {
  background-image: var(--gradient);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  font-weight: bolder;
}

<div class="gradient-btn">
  <p>Быстрый заказ</p>
</div>

Answer 2

▲ 0

.btn{
   -webkit-border-radius: 20px;
   -moz-border-radius: 20px;
   border-radius: 50px;
   height: 50px;
   line-height: 50px;
   color: red;
   font-family: Arial;
   width: 500px;
   font-size: 40px;
   font-weight: 100;
   padding: 40px;
   background-color: #FFFFFF;
   -webkit-box-shadow: 1px 1px 20px 0 #000000;
   -moz-box-shadow: 1px 1px 20px 0 #000000;
   box-shadow: 1px 1px 20px 0 #000000;
   text-shadow: 1px 1px 20px #000000;
   border: inset red 3px;
   text-decoration: none;
   display: inline-block;
   cursor: pointer;
   text-align: center;
}

Подберите border-radius как удобно(степень закругленности :) И еще у вас классы в элементе html и css отличаются - исправьте.

Закругленная кнопка с градиентом

Ответы