How do I make text show through a button that fills with color upon hover in CSS?-CodePudding

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?

JSFiddle

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;
}