html - 高度未知的盒子阴影

Question

我正在尝试创建滑动效果背景并尝试使用框阴影来创建效果。它工作正常，但由于 box-shadow 不能使用百分比单位，我不得不使用像素单位手动设置数量。

HTML:

<button id="play-game">Play Game!</button>

CSS:

#play-game{
    width:240px;
    height:71px;
    font-size:40px;
    transition: all ease 0.5s, color 0.5s;
    box-shadow: inset 0 0 0 0 rgb(3, 54, 110);
    background:rgb(61, 132, 212);
    border:none;
}
#play-game:hover{
    box-shadow: inset 0 71px 0 0 rgb(3, 54, 110);
    color:rgb(222, 222, 222);
}

http://jsfiddle.net/muycgfwg/
我想知道是否有任何方法可以使框阴影元素的高度。我还有一个方法，但是有点难合并，所以没有也没关系。感谢您的帮助!

Answer 1

最好的方法是使用伪元素并将文字包装在 <span> 中.代码有点多，但并不复杂。这是一个例子:

http://jsfiddle.net/muycgfwg/2/

#play-game{
  position: relative;
  font-size: 40px;
  background: rgb(61, 132, 212);
  border: none;
  padding: 10px 20px;
  overflow: hidden;
}

#play-game:after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: black;
  opacity: 0.5;
  transform: translateY(-100%);
  transition: all ease 0.5s;
}

#play-game:hover:after {
  transform: translateY(0);
}

#play-game span {
  position: relative;
  z-index: 10;
  transition: color 0.5s;
}

#play-game:hover span{
  color: rgb(222, 222, 222);
}

<button id="play-game"><span>Play Game!</span></button>