Css 按钮框-阴影过渡答案

【问题标题】：Css button box-shadow transitionCss 按钮框-阴影过渡
【发布时间】：2016-03-30 18:21:47
【问题描述】：

在按钮上制作过渡效果时遇到了一些问题。

使用“box-shadow”我可以创建这个：

.load {
	color:black;
	border:none;
	background-color: #ffffff;
	width: 100px;
	height: 30px;
	margin-left: 21px;
	box-shadow: inset 0 0 0 0 #000000;
	transition-duration: 0.3s;
	transition-timing-function: ease-in;

}
.load:hover {
	transition-duration: 0.3s;
	box-shadow: inset 0 -3px 0 0 #000000;
}

	<button class="load"> Home
  	</button>

阴影来自底部并进入按钮 3px。我希望它能够从左到右，但仍保持在 3px 高度。

我也很确定这个网站可以正常工作，但我无法通过检查它来提取所需的 CSS。

Website

谢谢！

【问题讨论】：

它是否必须与box-shadow 一起使用？我不认为你可以用阴影做到这一点，但还有其他方法可以做到这一点。
stackoverflow.com/questions/35641827/…的可能重复

标签： css button

【解决方案1】：

您可以使用:after 属性执行此操作。请参阅下面的示例。 after 元素的宽度在 0 到 100% 之间变化以获得效果。您可以根据需要轻松调整.home-link:after 的设置。

仅使用 box-shadow 不是最好的方法，当然也不是实现这种效果的最佳做法。

.home-link {
  position: relative;
  background: none;
  border: none;
  font-size: 1em;
  color: blue;
  width: 80px;
  text-align: center;
  margin: 0;
  padding: 0;
}

.home-link:after {
  position: absolute;
  bottom: 0;
  content: '';
  display: block;
  width: 0;
  height: 3px;
  background: #000;
  -webkit-transition: width .2s ease-in-out;
  transition: width .2s ease-in-out;
}

.home-link:hover:after {
  width: 100%;
}

&lt;button class="home-link"&gt;Home&lt;/button&gt;

【讨论】：