悬停颜色过渡幻灯片效果

Question

我有一个链接，当鼠标悬停在它上面时会改变颜色，我完全符合编码，但是我希望无论如何效果都会向下滑动而不是改变颜色。 这怎么可能与CSS。 我已经查看了堆栈溢出但只能找到人们使用背景图像并改变其位置的实例。 这是实现这一目标的唯一方法吗？

很难清楚地表达我想要实现的目标，但它正在本网站上展示weblounge.be我想要实现的效果是在主页上的两个链接

 #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

您链接的网站通过以下方式执行他们的工作:before伪元素:before将其比例转换为按钮顶部。 它还需要在按钮内部有一个span ，以便它的z-index可以设置在:before元素之上。 这是一个例子：

 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

不知道为什么你在白色上使用白色，无论如何根据我的理解我已经为你提供了一些东西

 #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>