0

I'm trying to make a white button with rounded corners and with a little transparency. The text should not be transparent. I tried to use opacity: initial for <p> style but it seems to not work. Take a look at my snippet to understand better.

body {
  background-color: #264D38;
 }

.button {
 display: inline-block;
 width: 150px;
 border-radius: 2px;
 margin-top: 20px;
 margin-bottom: 20px;
 background-color: #898989;
 opacity: 0.4;
 filter: alpha(opacity=40); /* Para IE8 e anteriores */
}

span.button > p {
 opacity: initial;
 padding: 10px;
 color: #ffffff;
 font-weight: bold;
    text-align: center;
}

.button:hover {
 background-color: #000000;
}
<body>
<a href="#"><span class="button"><p>BUY NOW</p></span></a>
</body>
R. Arnone
  • 423
  • 4
  • 15
Thassio Paganucci Xavier
  • 63
  • 6
  • 7
    Why are you wrapping a `

    ` with a `` to begin with? Your markup will be invalid if you wrap block level elements with inline elements. If you need another element use another `` or something else like ``, ``, ``, ``, etc.

     – hungerstar Apr 08 '16 at 13:26
  • 2
    `` elements represent phrasing content, and mechanically are used to group inline elements, as @hungerstar said. This is very bad practice. Please read up on HTML dom elements: [Span](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/span), and [p](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/p) for starters. – Redmega Apr 08 '16 at 13:29
  • Just to help emphasize the other two comments, this markup is invalid. – Rob Apr 08 '16 at 13:45
  • Sorry for my markup mistake, thanks for the info, I will correct right now. – Thassio Paganucci Xavier Apr 08 '16 at 13:47

4 Answers4

2

You could use an RGBA value for the background colour instead of using opacity.

Example

.button {
    display: inline-block;
    width: 150px;
    border-radius: 2px;
    margin-top: 20px;
    margin-bottom: 20px;
    background-color: rgba(137,137,137,.4);
}
Colin Bacon
  • 15,436
  • 7
  • 52
  • 72
1

Opacity affects all children elements. Children can't have a 0% transparency, when a parent have 40%.

Other solution is setting only semi-transparent background.

body {
    background-color: #264D38;
}

.button {
    display: inline-block;
    width: 150px;
    border-radius: 2px;
    margin-top: 20px;
    margin-bottom: 20px;
    background-color: rgba(255, 255, 255, 0.1);
}

span.button > p {
    padding: 10px;
    color: #ffffff;
    font-weight: bold;
    text-align: center;
}

.button:hover {
    background-color: rgba(0, 0, 0, 0.2);
}
<body>
    <a href="#">
        <span class="button">
            <p>BUY NOW</p>
        </span>
    </a>
</body>
Mateusz Jagiełło
  • 6,854
  • 12
  • 40
  • 46
0

First, use a proper structure of the code. span is an inline type and must be in the p element, which is a block type, as @hungerstar says it will not be a valid markup.

Then you can do it like this, with :before pseudo element to set the background and absolute position of the span :

See it here

Vincent G
  • 8,547
  • 1
  • 18
  • 36
0

You can use RGBA or HSLA for your background-color. You can improve on your markup so it's no longer invalid (you're wrapping a block level element <p> with an inline element <span>). We now have one less element with the same results.

Support chart for rgba() and hsla().

<a href="#"><span class="button">BUY NOW</span></a>

body {
  background-color: #264D38;
 }
.button {
    display: inline-block;
    width: 150px;
    padding: 26px 0;
    border-radius: 2px;
    margin-top: 20px;
    margin-bottom: 20px;
    background-color: rgba( 137, 137, 137, 0.4 );
    color: #FFF;
    font-weight: bold;
    text-align: center;
}
.button:hover {
    background-color: #000;
}

Demo JSFiddle.

hungerstar
  • 21,206
  • 6
  • 50
  • 59