I’ve created a small button with multiple borders, and on the hover of it, I’m able to see a smooth transition of color. I am unable to get rid of the borders when I hover over them. Currently when I hover, the color and background color changes, but the borders doesn’t go off.
Here is my code.
.c-btn--lg {
font-size: 2rem;
line-height: 1;
border: none;
font-family: titling-gothic-fb-compressed, sans-serif;
font-weight: 400;
letter-spacing: .2rem;
min-width: 14.5rem;
padding: 1.6rem 2rem;
}
.c-btn--primary {
background-color: transparent;
border: none;
color: #382f2d;
position: relative;
text-align: center;
text-decoration: none;
text-transform: uppercase;
-webkit-transition: .3s ease;
-o-transition: .3s ease;
transition: .3s ease;
}
.c-btn--primary:before {
bottom: 0.5rem;
left: 0;
right: 0.5rem;
top: 0;
}
.c-btn--primary:after {
bottom: 0;
left: 0.5rem;
right: 0;
top: 0.5rem;
}
.c-btn--primary:after,
.c-btn--primary:beforee {
border: 0.1rem solid #382f2d;
content: "";
pointer-events: none;
position: absolute;
-webkit-transition: .3s ease;
-o-transition: .3s ease;
transition: .3s ease;
}
.c-btn--primary:after,
.c-btn--primary:before {
border: 0.1rem solid #382f2d;
content: "";
pointer-events: none;
position: absolute;
-webkit-transition: .3s ease;
-o-transition: .3s ease;
transition: .3s ease;
}
.c-btn--primary:focus,
.c-btn--primary:hover {
-webkit-box-shadow: 0 0 0 0 #d1ccbd, inset 1rem 7rem 0 0 #d1ccbd;
box-shadow: 0 0 0 0 #d1ccbd, inset 1rem 7rem 0 0 #d1ccbd;
color:white;
}<div class="submitwrapper">
<button class="c-age-gate__submit c-btn c-btn--primary c-btn--lg" type="submit">ENTER</button>
</div>Please let me know where I’m going wrong and how can I fix this.
>Solution :
You can’t get the borders to "smoothly" disappear, but you can get rid of them with these selectors:
.c-btn--primary:hover::after,
.c-btn--primary:hover::before {
border: none;
}
.c-btn--lg {
font-size: 2rem;
line-height: 1;
border: none;
font-family: titling-gothic-fb-compressed, sans-serif;
font-weight: 400;
letter-spacing: .2rem;
min-width: 14.5rem;
padding: 1.6rem 2rem;
}
.c-btn--primary {
background-color: transparent;
border: none;
color: #382f2d;
position: relative;
text-align: center;
text-decoration: none;
text-transform: uppercase;
-webkit-transition: .3s ease;
-o-transition: .3s ease;
transition: .3s ease;
}
.c-btn--primary:before {
bottom: 0.5rem;
left: 0;
right: 0.5rem;
top: 0;
}
.c-btn--primary:after {
bottom: 0;
left: 0.5rem;
right: 0;
top: 0.5rem;
}
.c-btn--primary:after,
.c-btn--primary:before {
border: 0.1rem solid #382f2d;
content: "";
pointer-events: none;
position: absolute;
-webkit-transition: .3s ease;
-o-transition: .3s ease;
transition: .3s ease;
}
.c-btn--primary:focus,
.c-btn--primary:hover {
-webkit-box-shadow: 0 0 0 0 #d1ccbd, inset 1rem 7rem 0 0 #d1ccbd;
box-shadow: 0 0 0 0 #d1ccbd, inset 1rem 7rem 0 0 #d1ccbd;
color:white;
}
.c-btn--primary:hover::after,
.c-btn--primary:hover::before
{
border: none;
}<div class="submitwrapper">
<button class="c-age-gate__submit c-btn c-btn--primary c-btn--lg" type="submit">ENTER</button>
</div>