2

введите сюда описание изображения

В настоящее время я использую изображение белой границы вокруг кнопки. Но у этого решения есть проблемы с респонсивностью.

Можем ли мы создать все это с помощью CSS и устранить проблему с отзывчивостью?

.header-btn-section img{
display: block;
margin: 0 auto;
margin-top: -23px;
width: 370px;
height: 80px;
}
.header-btn {
    padding: 15px 40px 15px 40px;
    background: #5760f4;
    background-image: -webkit-linear-gradient(left, #5760f4 , #f3135d);
    background-image: linear-gradient(to right, #5760f4 , #f3135d); 
    border-radius: 40px;
    border: none;
    text-transform: uppercase;
    color: #fff;
    font-size: 25px;
    font-weight: bold;
}
.header-btn:hover {
    background: #6e73df;
    background-image: -webkit-linear-gradient(left, #f3135d, #5760f4);
    background-image: linear-gradient(to right,#f3135d,#5760f4); 
}
.btn-container {
    position: absolute;
    top: 50%;  
    left: 50%;
    transform: translate(-50%, -50%); 
}
<div class="header-btn-section" style="position: relative">
      <img class="btn-background" src="https://i.imgur.com/StNBlDd.png">
      <div class="btn-container">
          <button class="header-btn">Try DddxdVdDk Free !</button>
      </div>
  </div>

1

1 ответ 1

2

Вы можете сделать это с одним элементом, использующим background, border и background-clip:

.box {
  width:200px;
  height:70px;
  border-radius:70px;
  padding:5px; /* контроль пространства между border и background*/
  background-image:linear-gradient(to right,red, blue);
  background-clip:content-box; /* Отступы не окрашиваются */
  border:3px solid #fff;
  
  color:#fff;
  font-size:20px;
}
.box:hover {
  background-image:linear-gradient(to left,red, blue);
}

body {
 background:#8E8E8E;
}
<button  class="box">Some text here</button>

Если вы хотите использовать padding для управления интервалом между границей и кнопкой, используйте псевдоэлемент:

.box {
  padding:20px 40px;
  max-width:220px;
  border-radius:70px;
  position:relative;
  z-index:0;
  border:none;
  background:none;
  
  color:#fff;
  font-size:20px;
}
.box:before {
  content:"";
  position:absolute;
  z-index:-1;
  top:0;
  left:0;
  right:0;
  bottom:0;
  border-radius:inherit;
  padding:5px; /* контроль пространства между border и background*/
  background-image:linear-gradient(to right,red, blue);
  background-clip:content-box; /* Отступы не окрашиваются*/
  border:3px solid #fff;
}

.box:hover::before {
  background-image:linear-gradient(to left,red, blue);
}


body {
 background:pink;
}
<button  class="box">Some text here</button>

<button  class="box">Some long text here</button>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.