What I am looking for:
- I want the buttons to have rounded corners;
- The buttons should use linear-gradient, with button A as the border and button B as the background color;
- When hovering over the buttons, the opacity should change to 0.5. This works fine on solid-color buttons, but I am having difficulty with making it work on the outlined button (only the visible border should change opacity).
My main questions are:
- How can I change the opacity on hover for the first button?
- Why are there weird horizontal lines on button B when setting the border-color to transparent? How can I make the button one solid gradient color and fix this issue?
.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>