yishak abrham• 2,150
@yishak621
Posted
I use samp element inside button which will hold the text of btn learn and i add psudo elements in the button to add a color background for the button
<button class="btn btn-learn"><samp> learn more</samp></button>
in the css
.btn-learn {
padding: 0.2rem 0.5rem;
border-radius: 15px;
z-index: 1;
background-color: transparent;
text-transform: uppercase;
position: relative !important;
overflow: hidden !important;
}
.btn-learn::after {
content: "";
position: absolute;
left: 0;
top: 0;
height: 230%;
width: 100%;
background-color: hsl(51deg, 100%, 49%);
transition: 0.5s;
transform: translate(0%, 25%); /*translate x and y*/
opacity: 0.4;
z-index: -1;
}
.btn-learn:hover::after {
transform: translate(0%, 20%);
opacity: 1;
}
.btn-learn samp {
position: relative;
font-weight: 900;
font-family: "Fraunces", serif;
letter-spacing: 0.05em;
font-size: 0.8rem;
}
i added a hover effect which makes it cool ...u can checkout my solution to see the output
Marked as helpful
0
