How to make CSS button appear transparent

Question

I have the following CSS below which makes a button, but I would like to have the effect of transparency (and slightly see the background in the back). Please note that I don't wish to make it all transparent and totally invisible. Just a little bit...

I have tried messing around with the 'opacity' but that only blurs the image and distorts the color.

.i2Style {
  font:bold 20px"Arial Black", Gadget, sans-serif;
  font-style:normal;
  color:#ffd324;
  background:#158edb;
  border:0px solid #4a3a00;
  text-shadow:0px -1px 1px #222222;
  box-shadow:0px 0px 12px #2e2300;
  -moz-box-shadow:0px 0px 12px #2e2300;
  -webkit-box-shadow:0px 0px 12px #2e2300;
  border-radius:15px 15px 15px 15px;
  -moz-border-radius:15px 15px 15px 15px;
  -webkit-border-radius:15px 15px 15px 15px;
  width:87px;
  padding:20px 46px;
  cursor:pointer;
  margin:0 auto;
}

.i2Style:active {
  cursor:pointer;
  position:relative;
  top:2px;
}

@BrettWeber that will also make OP's font in the button transparent, maybe `rgba(155,155,155,0.5)` for background color? — Sam Creamer, Jul 09 '14 at 17:26
@SamCreamer, I think that may work better than opacity on the whole button, given the requirements — Brett Weber, Jul 09 '14 at 17:27
possible duplicate : http://stackoverflow.com/questions/806000/transparent-background-but-not-the-content-text-images-inside-it-in-css-on?rq=1 — Brett Weber, Jul 09 '14 at 17:34

MIdhun Krishna · Answer 1 · 2014-07-09T17:32:03.813

6

Transparency is determined by the alpha channel.

For example,

.button{
  background-color: rgba(0,0,0,1); // red, green, blue, alpha
}

gives a full black button while,

.button{
  background-color: rgba(0,0,0,0.5); // red, green, blue, alpha
}

black button, with 50% transparency.

edited Jul 09 '14 at 17:32

answered Jul 09 '14 at 17:26

MIdhun Krishna

1,739
1
13
31

Good answer, explanation is short and concise – Brett Weber Jul 09 '14 at 17:28

Brett Weber · Answer 2 · 2014-07-09T17:31:43.843

0

Since you are not looking for opacity, this post outlines both methods of css opacity and transparency

For anyone looking for opacity, this link will help

For the most part, opacity is supported everywhere. It isn't REALLY necissary to privide the fallbacks, but it will help for anyone that is behind the curve on updating their browser.

If you want more information, just google css opacity, or css opacity image

edited Jul 09 '14 at 17:31

answered Jul 09 '14 at 17:26

Brett Weber

1,839
18
22

As the OP mentioned, opacity will make the whole button transparent which is not what we want – Huangism Jul 09 '14 at 17:28

score 0 · Accepted Answer · answered Jul 09 '14 at 17:27

0

Try changing background to background-color: rgba(21,142,219,.70). That will keep your button solid but make the background slightly transparent.

answered Jul 09 '14 at 17:27

Anthony

5,275
11
50
86

score -1 · Answer 4 · answered Jul 09 '14 at 17:26

-1

Use opacity it shouldnt distort your image.

.i2Style {
        opacity: 0.4;
        filter: alpha(opacity=40); /* For IE8 and earlier */
    }

answered Jul 09 '14 at 17:26

Eddie Martinez

13,582
13
81
106

How to make CSS button appear transparent

4 Answers4