Create Buttons With CSS

Friday, July 22, 2011

Share this history on :
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

Thank you for visited me, Have a question ? Fill up contact form visit our contact us page
Please leave your comment below. Thank you and hope you enjoyed...

0 comments:

Post a Comment

Related Posts Plugin for WordPress, Blogger...