CODEWITHSUNDEEP
csslinear-gradients
rohiteb
rohiteb

Reputation: 49

button with gradient background and rounded outline

View Image

Currently I am using image of the whitish border and inside that I am using the button. But it has responsive issues. Can we create the whole thing with css or eliminate the responsive issue if it cant be done with 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>

Upvotes: 1

Views: 186

Answers (1)

Temani Afif
Temani Afif

Reputation: 272919

You can do this with one element considering background, border and background-clip:

.box {
  width:200px;
  height:70px;
  border-radius:70px;
  padding:5px; /* Control the space between border and background*/
  background-image:linear-gradient(to right,red, blue);
  background-clip:content-box; /* Don't color the padding */
  border:3px solid #fff;
  
  color:#fff;
  font-size:20px;
}
.box:hover {
  background-image:linear-gradient(to left,red, blue);
}

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

If you want to use the padding to control the spacing, use pseudo element:

.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; /* Control the space between border and background*/
  background-image:linear-gradient(to right,red, blue);
  background-clip:content-box; /* Don't color the padding */
  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>

Upvotes: 4

Related Questions