CODEWITHSUNDEEP
css
Elsewise
Elsewise

Reputation: 1

How to set hover for rounded outline button w/ gradient border

What I need is:

  1. Buttons must be rounded;
  2. Buttons must use linear-gradient (button A on its border, button B as a background color);
  3. Opacity must change to 0.5 on :hover [works fine on solid-color button, but I can't figure out how to make it work properly on the outline one (only opacity of the visible border should change)].

So, my main questions are:

  1. How do I change opacity on :hover on the first button?
  2. What's up with weird horizontal lines on button B (i.e. why simply setting border-color to transparent doesn't make the button one solid (gradient) color) and how do I fix this?

What I've got so far

.btn-default {
  border-radius: 22px;
  text-transform: uppercase;
  border: solid 2px;
}

.btn-default:hover {
  opacity: 0.5;
}

.btn-filled{
  background: linear-gradient(180deg, #BC9CFF 0%, #8BA4F9 100%);
  color: #FFFFFF;
  border-color: transparent;
}

.btn-outline {
  position:relative;
  box-sizing: border-box;
    
  background-clip: padding-box;
  border: transparent;
  
  color: #BC9CFF;
  background: white;
}

.btn-outline:before {
  content:'';
  position: absolute;
  top:0px; right:0px; bottom:0px; left: 0px;
  background: linear-gradient(180deg, #BC9CFF 0%, #8BA4F9 100%);  
  z-index: -1;
  margin: -2px;
  border-radius: inherit;
}
<!-- button A -->
<button type="button" name="button" class="btn-default btn-outline">click me</button>
<!-- button B -->
<button type="button" name="button" class="btn-default btn-filled">click me</button>

What I'm trying to recreate

Upvotes: 0

Views: 332

Answers (1)

Chris W.
Chris W.

Reputation: 23280

Separate the hover conditions to target the :before pseudo element on the outline like this.

.btn-default,
.btn-outline{
  border-radius: 22px;
  text-transform: uppercase;
  border: solid 2px;
}

.btn-default:hover {
  opacity: 0.5;
}

.btn-outline:hover:before {
  opacity: .5;
}

.btn-filled{
  background: linear-gradient(180deg, #BC9CFF 0%, #8BA4F9 100%);
  color: #FFFFFF;
  border-color: transparent;
}

.btn-outline {
  position:relative;
  box-sizing: border-box;
    
  background-clip: padding-box;
  border: transparent;
  
  color: #BC9CFF;
  background: white;
}

.btn-outline:before {
  content:'';
  position: absolute;
  top:0px; right:0px; bottom:0px; left: 0px;
  background: linear-gradient(180deg, #BC9CFF 0%, #8BA4F9 100%);  
  z-index: -1;
  margin: -2px;
  border-radius: inherit;
}
<!-- button A -->
<button type="button" name="button" class="btn-outline">click me</button>
<!-- button B -->
<button type="button" name="button" class="btn-default btn-filled">click me</button>

Upvotes: 0

Related Questions