Как задать скруглённый border c градиентом?

Question

Как сделать вот такой градиентный border с отступом от кнопки (отступ между кнопкой и border должен быть прозрачным)?

Идеально подходило бы свойство outline, но там нельзя задавать градиент для border. border-image не походит, так как нужна скруглённость

Answer 1

нужные цвета, думаю, вы сами подобрать сможете.

.wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 32px;
  height: 64px;
  width: 214px;
  background-image: linear-gradient(to left, green, red);
}

.inner {
  border: 2px solid black;
  border-radius: 25px;
  height: 50px;
  width: 200px;
  line-height: 50px;
  text-align: center;
  background-image: linear-gradient(to left, green, red);
}

<div class="wrapper">
  <div class="inner">
    More
  </div>
</div>

Answer 2

.first {
        border-width: 1px;
        border-style: solid;
        border-radius: 30px;
        border-color: #725FA2;
        border-collapse: collapse;
        padding: 10px 3px 12px 3px;
}
.second {
    border:none;
    padding: 10px 50px 10px 50px;
    border-radius: 30px;
    background: linear-gradient(to right, #9182b8 , #442B84);
    color: white;
    font-weight: bold;
}

<span class="first">
    <button class="second">Buy</button>
</span>

P.S. Я не мастер по CSS.

Answer 3

Правильный ответ: никак, CSS на данной стадии в такое не умеет.

Единственное, что Вы можете сделать сейчас – использовать SVG для кнопки (или обводки отдельно):

body {
  background: #222;
}

.button {
  border: none;
  background: none;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #fff;
  font-weight: bold;
  width: 200px;
  height: 75px;
  cursor: pointer;
}

.button:hover svg {
  filter: brightness(1.2);
}

.button svg {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  transition: 0.2s ease;
}

<button type="submit" class="button">
  <svg width="263" height="72" viewBox="0 0 263 72" fill="none" xmlns="http://www.w3.org/2000/svg">
    <rect x="3" y="3" width="257" height="66" rx="33" fill="url(#paint0_linear_2_5)"/>
    <rect x="0.5" y="0.5" width="262" height="71" rx="35.5" stroke="url(#paint1_linear_2_5)"/>
    <defs>
      <linearGradient id="paint0_linear_2_5" x1="3" y1="36" x2="260" y2="36" gradientUnits="userSpaceOnUse">
        <stop stop-color="#AD75D9"/>
        <stop offset="1" stop-color="#7319BA"/>
      </linearGradient>
      <linearGradient id="paint1_linear_2_5" x1="0" y1="36" x2="263" y2="36" gradientUnits="userSpaceOnUse">
        <stop stop-color="#AD75D9"/>
        <stop offset="1" stop-color="#7319BA"/>
      </linearGradient>
    </defs>
  </svg>
  <span>Заказать</span>
</button>

Answer 4

о, а это интересный квэст)

body{background: black}
.b{
border-radius: 40px; font-size: 45px; color: white;
border: 15px double black;
/*говоришь надо прозрачный отступ от кнопки?
берём дабл и врубаем микшер дабы притянуть градиет сюда за уши =)
хотел конечно сделать фон с бордюром одного цвета и
микшером притянуть в них градиент из div'а обертки,
но в прозрачный промежуток попадает фон из него же =(
*/
mix-blend-mode: lighten;
}
#ok1{
background: linear-gradient(0deg, #9182b8 , #442B84);
background: -webkit-linear-gradient(0deg, #9182b8 , #442B84);}
/*такой градиент катится лесом из-за кривых краёв, верно?*/

#ok2{
background: repeating-linear-gradient(0deg, #9182b8, #442B84, #442B84, #9182b8);
background: -webkit-repeating-linear-gradient(0deg, #9182b8, #442B84, #442B84, #9182b8);
}

/*а знаешь что? есть еще такая идейка... */
#ok3{backgroung: rgba(77,77,77,1); mix-blend-mode: color-dodge;}
#f{
background: linear-gradient(0deg, rgba(100,50,150,0.1), rgba(150,140,230,0.1));
background: -webkit-linear-gradient(0deg, rgba(100,50,150,0.1), rgba(150,140,230,0.1));
}
/*кривовато правда вышло, но все таки вполне честный
градиент =)*/

<input type='button' value='кнопка 1' class='b' id='ok1'/>
<input type='button' value='кнопка 2' class='b' id='ok2'/>
<div id='f'>
<input type='button' value='кнопка 3' class='b' id='ok3'/>
</div>

Answer 5

В реальных проектах, я бы предпочёл вариант с SVG, как это, к примеру, предложил @VladimirGonchar (за что ему плюсик), но, как вариант, предложу еще такой способ:

body {
  height: 100vh;
  background: repeating-linear-gradient(45deg, #ccc, #ccc 10px, #fff 10px, #fff 20px);
}

.btn-gradient {
  position: relative;
  width: 150px;
  height: 50px;
  padding: 5px 10px;
  margin: 5px;
  border-radius: 50px;
  border-width: 0;
  background: linear-gradient(to right, #7b69a9 0%, #442b84 100%);
  color: #fff;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
}

.btn-gradient::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50px;
  padding: 3px;
  margin: -5px;
  background: linear-gradient(45deg, #7b69a9, #442b84);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}
.btn-gradient:hover,
.btn-gradient:hover::before  {
  filter: brightness(1.2);
}

<button class="btn-gradient">Buy</button>

БЛОГ НА HUSL

Как задать скруглённый border c градиентом?

Ответы (5 шт):