Search code examples
htmlcssgoogle-chromebutton

How to create button with different gradient in left and right border

How to create rounded gradient pushbutton with dark color areas in left and right side:

enter image description here

Tried style

.gradient-hover-effect {
    background: linear-gradient(90deg, #3f51b5, transparent) #2196f3;
    font-family:'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    font-size:xx-large;
    padding: 1em;
    color: #fff;
    text-decoration: none;
    transition: background-color 1s;
    place-content: center;
}

but this produces not so nice button:

enter image description here

Using Google Chrome browser in modern tablet.

Solution

  • Based on what is seen here, here it is:

    /* CSS */
.glassbutton {
  background: linear-gradient(#102752, transparent) #2196f3;
  border: 0;
  border-radius: 30px;
  color: #fff;
  cursor: pointer;
  display: inline-block;
  font-family:'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
  font-size:xx-large;
  font-weight: 600;
  outline: 0;
  padding: 21px 1em;
  position: relative;
  text-align: center;
  text-decoration: none;
  transition: all .3s;
  text-transform: uppercase;
}

.glassbutton:before {
  background-color: initial;
  background-image: linear-gradient(#fff 0, rgba(255, 255, 255, 1) 20%,  rgba(255, 255, 255, 0) 100%);
  border-radius: 125px;
  content: "";
  height: 50%;
  left: 4%;
  opacity: .5;
  position: absolute;
  top: 0;
  transition: all .3s;
  width: 92%;
}

.glassbutton:hover {
  box-shadow: rgba(255, 255, 255, .2) 0 3px 15px inset, rgba(0, 0, 0, .1) 0 3px 5px, rgba(0, 0, 0, .1) 0 10px 13px;
  transform: scale(1.05);
}
    <button class="glassbutton">Eraklient</button>