Create cool buttons using CSS3 and RGBa

Well, seeing this title, we can ignore IE browsers first.

I admit that I have a minimalist tendency and I want to be able to do more with the least amount of code and pictures.

Although CSS3 only adds a few new features, these properties can do many useful things and greatly simplify our work. The buttons we made today make full use of the rounded corners, box shadow and text shadow effects of CSS3, while using RGBa colors.

Let’s take a look at the demo first:

We can make these beautiful buttons in four steps:

1. Basic settings of buttons

We need to set the basic style of the button first. Here we use the a tag. Of course, you can also use input, button tags, etc. The a tag is used here because only the a tag among these three tags supports the :hover pseudo-class.

Thanks to ytzong Children's Shoes for his suggestion. We changed to display:inline-block, which can save the float and margin lines of code. ——[email protected]

2. Semi-transparent png gradient picture

This is the only image we use here. This transparent png image is used to achieve color gradients. We can call this image a monochrome transparency gradient. In CSS, you can achieve different color gradient effects by using a background demo + a png image like this. Of course, this is not a feature of CSS3. Except for browsers below IE6, all browsers can achieve this effect. You can click here to view the png file.

3. Rounded corners

Rounded corners (border-radius) is one of the best CSS3 features currently supported by browsers. In addition to IE browsers, all A-level browsers support it. Although most of them are implemented through private attributes, at least, it is available. .

4.Shadows and RGBa

Box-shadow and text-shadow are two new important properties added to CSS3. They can easily implement block-level element shadows and text shadows. However, wouldn’t it be better if the shadow color was semi-transparent? This way the element would blend in better with the background. It is worth noting that FF only supports the text-shadow attribute until version 3.5 (currently supported by Firefox 3.5beta4).

 .btn {
 ...
 background: #222 url(sprites.png) repeat-x;
 /**Background image**/
 -moz-border-radius: 5px;
 -webkit-border-radius: 5px;
 border-radius: 5px;
 /**rounded corners**/
 -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
 -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
 /**Button Shadow**/
 text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.25);
 /**text shadow**/
 }

Okay, now our button is completely done. It has achieved our goal.

This button is black, so buttons of other colors are easier to implement:

Please note that these styles must be placed after .btn. In this way, the background color of these green, blue, red, etc. buttons can override the background color of .btn. and then use

Finally, let us take pity on the IE browser. These buttons will display right angles, gradient colors, no shadows, and no transparent colors in IE7 and IE8 browsers, but in IE6, they will display a light blue background. This is because IE6 does not support png transparency. If you want it to look like a button in IE6, just use the IE filters after js.