Click here to Skip to main content
15,609,235 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
I got you the code with but took my trying in the code(I already tried several things but it always came down to an error)

<pre><a class="button" href="#"></a>
<button type="button">Click me!</button>
.button {
  display: inline-block;
  margin-top: 10%;
  padding: 1em 2em;
  font-size: 2em;
  color: #fff;
  font-family: arial, sans-serif;
  text-decoration: none;
  border-radius: 0.3em;
  position: relative;
  background-color: #ccc;
  background-image: linear-gradient(to top, #6d8aa0, #8ba2b4);
  -webkit-backface-visibility: hidden;
  z-index: 1;
.button:after {
  position: absolute;
  content: '';
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 0.3em;
  background-image: linear-gradient(to top, #ca5f5e, #d68584);
  transition: opacity 0.5s ease-out;
  z-index: 2;
  opacity: 0;
body {
  text-align: center;
  background: #ddd;

What I have tried:

I tried to select the pseudo element but there was an error which said uncaught property null.
I want to change the color of the box with the opacity.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900