CSS buttons

The elegant button that changes appearance to mouse passage is very much used on Web pages. Long, the majority of these buttons were animated by a JavaScript or worse (because heavier) by a Java applet. You can find examples of using CSS buttons on many sites. Visit this link to see the practical implementation of these buttons in online casino review site that has the latest bonus offers from Canadian gambling establishments.

With the CSS lightness and simplicity is put to create beautiful buttons.

The image button that changes appearance to the mouse is very much used on Web pages. Long, the majority of these graphical buttons were animated by a JavaScript or worse (because heavier) by a Java applet.

With CSS, by effect “rollover “, lightness and simplicity is set to create beautiful buttons.

Simple CSS button
HTML Code (s)

A button is usually used to link to another page, the selectors used in the CSS code will be a and a:hover for the change of appearance to the overflight of the button (if desired change of course…).

For a single button, the HTML code can be the following:

<div class=””bouton””>
<p>
<a href=””#””>Button</a>
</p>
</div>

Now let’s take two images, one of which will be used for the rest button, and the other for the hover.

Note that with CSS3, the same gradient effects can be achieved with background-image: Linear-gradient () without the need for images.
CSS Code

These two images with a size of 150 pixels on 50, you will have to give the selector has the same size. Small problem, A is of type “inline “, it can not be assigned size. It will, therefore, have to change its default status to give it a behavior of type “Block “. The display attribute will be used for this.

Another tip, to be able to center the text vertically, instead of giving the height with a height, one will define a line height (line-height), and so we can apply a vertical-align: Middle that will align the text perfectly.

. Button a {
Display: Block;
Width: 150px;
Line-height: 50px;
Text-align: center;
Vertical-align: middle;
Background: URL (Images/button-black. png) no-repeat;
Color: white;
Text-decoration: none;
}
. a:hover button {
Background: URL (Images/button-black-2. png) no-repeat;
}

Isn’t that great?!! Not???? Yes good, okay, design side I’m a goat;-P. You will of course make beautiful images of buttons for a much sexier rendering.
Several CSS buttons

Since the links have been declared as type “Block”, each tag has a line break. If you want to make several buttons below each other, this is not a problem. On the other hand, if you want them to be aligned horizontally, you will need to add a few things in the CSS code.

We’re just going to make them float. Be careful however to add a clear: both in the HTML element that will follow to avoid unpleasant things…

This will have to be added to the selector code a.

float: Left;
margin: 2px;

Margins are not obligatory, it’s just so that the images do not touch.

However, for this type of presentation often used for a menu, it is better to use a list markup rather than to use a paragraph. So I invite you to browse the tutorial: “Horizontal menu in CSS “.
Additional Readings