Create Buttons With CSS

With the advent and advancement of CSS 3, many designers are opting to reduce the use of images on websites, in order to increase the speed of web pages. I already taught some legal techniques to let your Blogger blog more beautiful and professional and now I will explain how to create buttons (buttons) by using only CSS.

Enter the site Button Maker and use the right pane to customize the button:

Use the three sliders to choose the size and depth of the button.

Underneath, choose the colors as follows:

• Top Gradient Color: the top color gradient

• Bottom color gradient: low color gradient

• Top Border Color: border color of the top

• Hover background color: background color when you hover

• Text Color: Text Color

• Hover Text Color: color of text when you hover

• Active background color: background color by clicking the

Once the button is ready, click on it and copy the code.

Enter the Blogger dashboard, click Design> HTML editing. Make a backup template and paste the code before the tag ]]> </B:skin> (Use the Ctrl + F keys to find it). Replace the dot (.) That is before each word "button" by the pound sign (#). Looks like this: # Button. View and save.

In "page elements", click add gadget HTML / javascript.

Paste this code:

<div id="button>WRITE TEXT HERE</ Div>

Write, where indicated, the text that should appear on the button. If you want to put a link, use this other code:

<div id="button"> <a href = "LINK”>TEXT</ A> </ div>

Ready! Now your blog has already done just a button with CSS;)

See the image below, Nice example

There are other sites to create custom buttons in CSS:

• CSS Button Generator
• CSS3 Button Generator
• CSS Button Maker