jQuery按钮背景幻灯片中/上效果

Question

快速提问 - 如下所示，实现效果的最佳方法是什么？我想要一个按钮的确切形状，但是用不同的颜色，从底部滑入。我目前在纯CSS上有按钮，我可以保持这种方式（首选）还是我需要将按钮设置为精灵gfx并且只为背景位置设置动画？

Answer 1

您可以使用纯CSS：

.button {
  width: 200px; height: 100px;
  background-size: 100% 200%;
  background-image: linear-gradient(to bottom, blue 50%, orange 50%);
  -webkit-transition: background-position 1s;
  -moz-transition: background-position 1s;
  transition: background-position 1s;
}

.button {
  background-position: 0 +100%;
}

http://jsfiddle.net/P6Jx7/

Answer 2

您可以使用:before伪选择器执行此操作：

<强> HTML

<div class="button"><a href="#">Send</a></div>

<强> CSS

.button {
    width:150px;
    border-radius:10px;
    position:relative;
    overflow:hidden;
}
.button a{
    display:block;
    height:50px;
    line-height:50px;
    position:relative;
    z-index:10;
}
.button:before {
    content:" ";
    display:block;
    width:150px;
    height:50px;
    border-radius:10px;
    background:orange;
    position:absolute;
    left:0;
    top:100%;
    transition:all 1s;
}
.button:hover:before {
    top:0;
}

选中 Demo Fiddle