Question

我想将<a/> - 标签设为按钮。背景分为三部分：

[before][text][after]

问题1：

[before]和[after]的背景覆盖[text]。如果[before] / [after]的不透明度不是100％，或者背景图像具有透明像素，则[text]的背景变为可见。这就是为什么我需要它们在之外的锚点。

问题2：

我浮动所有三个元素但需要清除浮动以便能够像往常一样继续使用其他标记。

这是小提琴：http://jsfiddle.net/WdUdy/

HTML：

<a href="" class="button">I'm a button</a>

CSS：

a.button {
    display: inline-block;
    line-height: 38px;
    padding: 5px;
    background: #616161;
    color: #E0E0E0;
    font-family: Verdana;
    float: left;    
}

a.button:before {
    content: "";
    background-color: #A50063;
    opacity: 0.5;
    display: block;
    width: 20px;
    height: 40px;
    float: left;    
}

a.button:after {
    content: "";
    background-color: #A50063;
    opacity: 0.5;
    display: block;
    width: 20px;
    height: 40px;
    float: right;
}

我很欣赏代码段，教程或任何其他帮助。提前谢谢！

Answer 1

当然，这是一个简单的问题，即在锚点内，在文本周围添加一个span，并将伪元素基于它？

<a href="" class="button"><span>I'm a button</span></a>

<强> JS Fiddle

Answer 2

http://jsfiddle.net/WdUdy/4/

您可以在相对定位的文本之前和之后放置绝对定位的块，高度为100％。

a.button {
    display: inline-block;
    line-height: 38px;
    padding: 5px;
    margin-left: 30px;
    background: #616161;
    color: #E0E0E0;
    font-family: Verdana;
    float: left;
    position: relative;    
}

a.button:before {
    content: "";
    background-color: #A50063;
    opacity: 0.5;
    display: block;
    position: absolute;
    width: 30px;
    height: 100%;
    top: 0;
    left: -30px;   
}

a.button:after {
    content: "";
    background-color: #A50063;
    opacity: 0.5;
    display: block;
    position: absolute;
    width: 30px;
    height: 100%;
    top: 0;
    right: -30px;
}

Answer 3

我尝试过之前和之后都没有使用伪。看看：

a.button {
    display: inline-block;
    line-height: 38px;
    padding: 5px;
    background: #616161;
    color: #E0E0E0;
    font-family: Verdana;
    float: left;  
    border-left: solid 30px rgba(165, 0, 99, 0.3);
    border-right: solid 30px rgba(165, 0, 99, 0.3);
}

不透明度的背景：在锚之前和之后

3 个答案: