Question

我在按钮上制作过渡效果时遇到了一些麻烦。

使用“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

谢谢！

Answer 1

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

仅使用box-shadow并不是最好的方法，而且肯定不是此效果的最佳做法。

＆＃13;

.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%;
}

＆＃13;

<button class="home-link">Home</button>

＆＃13;

Css按钮框 - 阴影过渡

1 个答案: