Question

我一直在制作一个（希望）看起来相当逼真的按钮。其中一部分是按下按钮时文本在按钮内向下移动1px。我通过在顶部添加一个额外的像素并从底部删除一个像素来完成此操作。

不幸的是，我设计了我的按钮以内联工作（内联块），当按钮被“推”时，这意味着该行上的任何文本也会被推下。现在我想我知道为什么（大概是由于文本的基线）但我想知道是否有人知道如何在保持周围文本到位的同时获得相同的“推动”效果。如果可能的话，我想避免花车。

无论如何使用代码： http://gard.me/xsfqH

HTML：

<a class="button noIcon smaller" href="#">Buy Now</a> hello world

CSS：

a.button {
    margin: 20px;
    display: inline-block;
    padding: 12px 12px 12px 12px;

    background: none;
    background-repeat: no-repeat;
    background-position:  9px 5px;
    background-position:  9px 5px, 0 0;

    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    border-width: 1px;
    border-style: solid;

    font-family: Verdana, Arial, Sans-Serif;
    text-decoration: none;
}

a.button:active {
    padding-top: 13px; padding-bottom: 11px;
    -webkit-box-shadow: inset 0px 1px 6px -1px #000000;
    -moz-box-shadow: inset 0px 1px 6px -1px #000000;
    box-shadow: inset 0px 1px 6px -1px #000000;
}

a.button.noIcon {
    color: #FFECEA;
    background-position: 0 0;
    background-color: #E46553;
    background-image: -o-linear-gradient(bottom, #D15039 0%, #F27466 100%);
    background-image: -moz-linear-gradient(bottom, #D15039 0%, #F27466 100%);
    background-image: -webkit-linear-gradient(bottom, #D15039 0%, #F27466 100%);
    background-image: -ms-linear-gradient(bottom, #D15039 0%, #F27466 100%);
    background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #D15039), color-stop(1, #F27466));
    border-color: #A03E33;
}

Answer 1

因为它是内联块，所以你可以使用vertical-align。

所以你要做的就是

a.button:active {
    padding-top: 13px;padding-top:11px;
    -webkit-box-shadow: inset 0px 1px 6px -1px #000000;
    -moz-box-shadow: inset 0px 1px 6px -1px #000000;
    box-shadow: inset 0px 1px 6px -1px #000000;
    vertical-align:1px;
}

问题解决了

保持内联文本

1 个答案: