CSS Tranistion按钮背景色

Question

Trying to create a slide right transition on a button. If I remove the .container background color the transition works. But I want the button to start black and change to yellow while keeping the container color as default. But the output seems different. It will only transition to yellow if the button background is transparent. Any help is appreciated, been racking my brain way too long on this.

 .container { background: #F0F0F0; margin: 20px 20% } a.animated-button:link, a.animated-button:visited { position: relative; display: block; margin: 30px auto 0; padding: 14px 15px; color: #fff; font-size: 14px; text-align: center; text-decoration: none; text-transform: uppercase; overflow: hidden; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 1s ease; transition: all 1s ease; } a.animated-button:link:after, a.animated-button:visited:after { content: ""; position: absolute; height: 0%; left: 50%; top: 50%; width: 150%; z-index: -1; -webkit-transition: all 0.75s ease 0s; -moz-transition: all 0.75s ease 0s; -o-transition: all 0.75s ease 0s; transition: all 0.75s ease 0s; } a.animated-button:link:hover, a.animated-button:visited:hover { color: #FFF; } a.animated-button:link:hover:after, a.animated-button:visited:hover:after { height: 450%; } a.animated-button:link, a.animated-button:visited { position: relative; display: block; margin: 30px auto 0; padding: 14px 15px; color: #fff; font-size: 14px; border-radius: 0; font-weight: bold; text-align: center; text-decoration: none; text-transform: uppercase; overflow: hidden; letter-spacing: .08em; text-shadow: 0 0 1px rgba(0, 0, 0, 0.2), 0 1px 0 rgba(0, 0, 0, 0.2); -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 1s ease; transition: all 1s ease; } a.animated-button.thar-three { color: #fff; cursor: pointer; display: block; position: relative; border: 2px solid #F7CA18; transition: all 0.4s cubic-bezier(0.42, 0, 0.58, 1) 0s; } a.animated-button.thar-three:hover { color: #000 !important; } a.animated-button.thar-three:hover:before { left: 0%; right: auto; width: 100%; } a.animated-button.thar-three:before { display: block; position: absolute; top: 0px; right: 0px; height: 100%; width: 0px; z-index: -1; content: ''; color: #000 !important; background: #F7CA18; transition: all 0.4s cubic-bezier(0.42, 0, 0.58, 1) 0s; } 

  <div class="container"> <p><a href="#" class="animated-button thar-three">Register</a></p> </div> 

Answer 1

As you've written it, your ::before pseudo-element is below the .container element, because both the .container and the anchor ( a ) are on the same z-index.

To place it in-between the anchor and the container, you need to make your anchor being above the container on the z-axis, ie, set its z-index .

 a.animated-button.thar-three { color: #fff; cursor: pointer; display: block; position: relative; border: 2px solid #F7CA18; transition: all 0.4s cubic-bezier(0.42, 0, 0.58, 1) 0s; /* place it at a higher z-index than its parent ... */ z-index: 1; } a.animated-button.thar-three:before { display: block; position: absolute; top: 0px; right: 0px; height: 100%; width: 0px; /* ... to make this be in-between .container and the a */ z-index: -1; content: ''; color: #000 !important; background: #F7CA18; transition: all 0.4s cubic-bezier(0.42, 0, 0.58, 1) 0s; } .container { background: #F0F0F0; margin: 20px 20% } a.animated-button:link, a.animated-button:visited { position: relative; display: block; margin: 30px auto 0; padding: 14px 15px; color: #fff; font-size: 14px; text-align: center; text-decoration: none; text-transform: uppercase; overflow: hidden; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 1s ease; transition: all 1s ease; } a.animated-button:link:after, a.animated-button:visited:after { content: ""; position: absolute; height: 0%; left: 50%; top: 50%; width: 150%; z-index: -1; -webkit-transition: all 0.75s ease 0s; -moz-transition: all 0.75s ease 0s; -o-transition: all 0.75s ease 0s; transition: all 0.75s ease 0s; } a.animated-button:link:hover, a.animated-button:visited:hover { color: #FFF; } a.animated-button:link:hover:after, a.animated-button:visited:hover:after { height: 450%; } a.animated-button:link, a.animated-button:visited { position: relative; display: block; margin: 30px auto 0; padding: 14px 15px; color: #fff; font-size: 14px; border-radius: 0; font-weight: bold; text-align: center; text-decoration: none; text-transform: uppercase; overflow: hidden; letter-spacing: .08em; text-shadow: 0 0 1px rgba(0, 0, 0, 0.2), 0 1px 0 rgba(0, 0, 0, 0.2); -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 1s ease; transition: all 1s ease; } a.animated-button.thar-three:hover { color: #000 !important; } a.animated-button.thar-three:hover:before { left: 0%; right: auto; width: 100%; } 

 <div class="container"> <p><a href="#" class="animated-button thar-three">Register</a></p> </div> 

Answer 2

I adjust the code a bit and now the container is working well even with black background set. Its now animating from black to yellow. Additionally, I have also removed yellow border to create slick animation look.

Here is the working snippet.

 .container { background: #F0F0F0; margin: 20px 20% } a.animated-button:link, a.animated-button:visited { position: relative; display: block; margin: 30px auto 0; padding: 14px 15px; color: #fff; font-size: 14px; text-align: center; text-decoration: none; text-transform: uppercase; overflow: hidden; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 1s ease; transition: all 1s ease; } a.animated-button:link:after, a.animated-button:visited:after { content: ""; position: absolute; height: 0%; left: 50%; top: 50%; width: 150%; z-index: -1; -webkit-transition: all 0.75s ease 0s; -moz-transition: all 0.75s ease 0s; -o-transition: all 0.75s ease 0s; transition: all 0.75s ease 0s; } a.animated-button:link:hover, a.animated-button:visited:hover { color: #FFF; } a.animated-button:link:hover:after, a.animated-button:visited:hover:after { height: 450%; } a.animated-button:link, a.animated-button:visited { position: relative; display: block; margin: 30px auto 0; padding: 14px 15px; color: #fff; font-size: 14px; border-radius: 0; font-weight: bold; text-align: center; text-decoration: none; text-transform: uppercase; overflow: hidden; letter-spacing: .08em; z-index: 1; text-shadow: 0 0 1px rgba(0, 0, 0, 0.2), 0 1px 0 rgba(0, 0, 0, 0.2); -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 1s ease; transition: all 1s ease; } a.animated-button.thar-three { color: #fff; cursor: pointer; display: block; position: relative; transition: all 0.4s cubic-bezier(0.42, 0, 0.58, 1) 0s; background-color: black; } a.animated-button.thar-three:hover { color: #000 !important; } a.animated-button.thar-three:hover:before { left: 0%; right: auto; width: 100%; } a.animated-button.thar-three:before { display: block; position: absolute; top: 0px; right: 0px; height: 100%; width: 0px; z-index: -1; content: ''; color: #000 !important; background: #F7CA18; transition: all 0.4s cubic-bezier(0.42, 0, 0.58, 1) 0s; } 

 <div class="container"> <p><a href="#" class="animated-button thar-three">Register</a></p> </div>