I have the following HTML document...
<!DOCTYPE html>
<html>
<head></head>
<body>
<a href="https://google.com" >Get Started</a>
</body>
</html>
With the CSS being...
* {
margin: 0;
padding: 0;
}
.main__btn {
display: inline-block;
font-size: 1rem;
background-image: linear-gradient(to top, #d15858 0%, #3f3cf5 100%);
padding: 1.5rem 32px;
border: none;
border-radius: 12px;
color: white;
cursor: pointer;
position: relative;
text-decoration: none;
z-index: 2;
}
.main__btn::after {
position: absolute;
content: '';
top: 0;
left: 0;
width: 0;
height: 100%;
background: #662cb3;
transition: all ease-in 0.32s;
border-radius: 12px;
}
.main__btn:hover {
color: white;
}
.main__btn:hover::after {
width: 100%;
}
This issue I'm having is not being able to make the text show the the color that fills the button.
How can I make the text "Get Started" text show through the color after it fills the button?
CodePudding user response:
.main__btn::after {
position: absolute;
content: '';
top: 0;
left: 0;
width: 0;
height: 100%;
background: #662cb3;
transition: all ease-in 0.32s;
border-radius: 12px;
z-index: -1
}
CodePudding user response:
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
<style>
.main__btn {
display: inline-block;
font-size: 1rem;
background-image: linear-gradient(to top, #d15858 0%, #3f3cf5 100%);
padding: 1.5rem 32px;
border: none;
border-radius: 40px;
color: white;
cursor: pointer;
position: relative;
text-decoration: none;
z-index: 2;
}
:hover.main__btn {
background: #000000;
transition: all ease-in .30s;
}
</style>
</head>
<body>
<a href="https://google.com" >Get Started</a>
</body>
</html>
CodePudding user response:
you can try to write it on the content ' ' with 0 opacity then show it over when u hover , for Example :
.main__btn::after {
display:flex;
justify-content: center;
align-items: center;
position: absolute;
content: 'Get Started';
text-align: center;
top: 0;
left: 0;
width: 0;
height: 100%;
background: #662cb3;
transition: all ease-in .2s;
border-radius: 12px;
opacity: 0;
}
.main__btn:hover::after {
width: 100%;
opacity: 1;
}