悬停颜色过渡幻灯片效果

Question

I have a link that changes colour when mouse hovers over it and i am fully conformable with the coding for this however i would like the however effect to slide down as oppose to just change colour. how is this possible with css. I have looked around stack overflow but only able to find instances where people use background images and alter the its position. Is that the only way to make this possible?

It is difficult to articualte what i am trying to achieve but it is on show on this website weblounge.be the effect that i am trying to achieve is on the two links on the homepage

 #contactlink { display: inline-block; font-weight: 700; text-transform: uppercase; padding: 11px 51px; border: 1px solid #fff; -webkit-transition: .2s; transition: .2s; margin-left: 78px; margin-top: 40px; float: left; color: #FFF; text-decoration: none; -webkit-transition: .2s; transition: .2s; text-decoration: none; opacity: 0; } #contactlink:hover { background-color: #FFF; color: #666; border: 1px solid #fff; -webkit-transition: .2s; transition: .2s; } 

 <a href="#contact" class="smoothScroll" id="contactlink">Let's talk</a> 

https://jsfiddle.net/6t3quy4w/5/

Answer 1

The website you linked does theirs by having the :before pseudo-element transition its scale over top of the button. It also required having a span inside the button so that its z-index could be set on top of the :before element. Here is an example:

 a.color-change { display: inline-block; padding: 15px; color: black; background-color: white; position: relative; padding: 15px; border: 1px solid black; text-decoration: none; z-index: 0; } a.color-change:before { content: ' '; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: #777; transform: scale(1, 0); transition: all .25s ease-out; transform-origin: center top; z-index: 0; } a.color-change:hover:before { transform: scale(1); } a.color-change span { z-index: 1; position: relative; } 

 <a href="#" class="color-change"><span>Hover Over Me</span></a> 

Answer 2

Not sure why your using whit on white, anyway based on my understanding i have provide some thing for you

 #contactlink { background: #1568b6; color: #fff; display: inline-block; line-height: normal; padding: 17px 20px 16px 20px; position: relative; font-weight: 700; text-transform: uppercase; text-decoration: none; font-size: 14px; letter-spacing: 1px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; -webkit-transition: background .15s; -moz-transition: background .15s; -ms-transition: background .15s; -o-transition: background .15s; transition: background .15s } #contactlink span { position: relative; z-index: 1; -webkit-transition: color .25s; -moz-transition: color .25s; -ms-transition: color .25s; -o-transition: color .25s; transition: color .25s } #contactlink:before { background: #6c6c6c; content: ""; position: absolute; top: 0; left: 0; width: 100%; bottom: 0; z-index: 0; display: block; padding: 0; -webkit-transform: scale(1, 0); -moz-transform: scale(1, 0); -ms-transform: scale(1, 0); -o-transform: scale(1, 0); transform: scale(1, 0); -webkit-transform-origin: center top; transform-origin: center top; -webkit-transition: all .25s ease-out; -moz-transition: all .25s ease-out; -ms-transition: all .25s ease-out; -o-transition: all .25s ease-out; transition: all .25s ease-out } #contactlink:hover:before { -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1) } 

 <a href="#contact" class="smoothScroll" id="contactlink"> <span>Let's talk</span> </a>