Dev Stack Source

Answer : Unfortunately the opacity element makes the whole element (including any text) semi-transparent. The best way to make the border semi-transparent is with the rgba color format. For example, this would give a red border with 50% opacity: div { border: 1px solid rgba(255, 0, 0, .5); -webkit-background-clip: padding-box; /* for Safari */ background-clip: padding-box; /* for IE9+, Firefox 4+, Opera, Chrome */ } The problem with this approach is that some browsers do not understand the rgba format and will not display any border at all if this is the entire declaration. The solution is to provide two border declarations. The first with a fake opacity, and the second with the actual. If a browser is capable, it will use the second, if not, it will use the first. div { border: 1px solid rgb(127, 0, 0); border: 1px solid rgba(255, 0, 0, .5); -webkit-background-clip: padding-box; /* for Safari */ background-clip: padding-box; /* for IE9+, Firefox ...

Answer : You should read about rgba This is the syntax: .button { background-color: rgba(255, 153, 36, 0.5) } Here's a Hex-to-RGB Color Converter You should use rgba() to set the background-color with desired opacity It won't change the text's opacity. Read more about rgba at CSS3.INFO .button { //... background-color: rgba(255, 153, 36, 0.5); //... } See this DEMO