CSS Buttons

danielstiv999 Programing, Technology ,

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.

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

You May Also Like..

HTML – What Does It Stand For? Usage and Meaning

HTML The HTML is a computer language used on the internet. This language is used to create web pages. The […]

Matshita UJ-857 Units Flawed Zebra Silenced by Apple

Over the last three days, zebra has been fighting to get the world’s MacBook Pro optical drive users a better […]

ImgBurn – The Ultimate Image Burner

  ImgBurn carries on from where DVD Decrypter left off! (Well, for the burning part anyway!) ImgBurn can write most […]

Leave a Reply

Your email address will not be published. Required fields are marked *