CODEWITHSUNDEEP
htmlcsscss-float
Mr. B.
Mr. B.

Reputation: 8717

Background with opacity :before and :after anchor

I'd like to style <a/>-tags as buttons. The background is cutted in three parts:

[before][text][after]

Problem 1:

The backgrounds of [before] and [after] are overlying [text]. If the opacity of [before]/[after] isn't 100% or the background-images have transparent pixels, the background of [text] becomes visible. That's why I need them outside the anchor.

Problem 2:

I float all three elements but need to clear the floating to be able to continue with other tags as usual.

Here's the fiddle: 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;
}

I'd appreciate a code snippet, tutorial or any other help. Thanks in advance!

Upvotes: 0

Views: 175

Answers (3)

Paulie_D
Paulie_D

Reputation: 115278

Surely this is a simple matter of adding a span inside the anchor, around the text, and basing the pseudo elements on that?

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

JS Fiddle

Upvotes: 1

000
000

Reputation: 27247

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

You can place absolutely-positioned blocks before and after your relatively-positioned text, with a height of 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;
}

Upvotes: 0

David Morabito
David Morabito

Reputation: 1498

I tried without using pseudo before and after. Take a look:

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);
}

Upvotes: 0

Related Questions