Add CSS3 Round Buttons For Website

Add This To Del.icio.us Tweet/ReTweet This Share on Facebook StumbleUpon This Add to Technorati Digg This

CSS has become a integral part of a good looking blog.We designing is very important so as to leave a mark on your readers.A good looking site is always remembered by a reader.In order to get your readers attention their are certain tricks and tweaks by which you will be able to leave that WOW impression.There are some widgets which make use of CSS.These widgets have become very common and hence they are not that appealing.Their should be some element of surprise in your blog.Some blogs rely on external linking.Buttons are way better than the simple text links.Adding of buttons in your blog is not that difficult a task.Today I am going to show you a simple method by which you will be able to add the exciting new round cornered CSS buttons.These buttons are very easy to use.So let's go ahead and cut the cake.

You can view a demo of this tutorial for better understanding

View Demo

CSS Code Add

Go to blogger dashboard → Template → Edit Template

Now find the following code using F3

]]></b:skin>

Now add the following CSS code just above it

<link href='https://blogswidget.googlecode.com/svn/wiki/CSS3round.css' rel='stylesheet' type='text/css'/>

Now save

You are ready to put awesome CSS3 round button on your blog post or website

HTML Code

<div class="roundbutton"><a class="red" href="http://www.domain.com/">BUTTON TEXT</a></div>

<div class="roundbutton"><a class="orange" href="http://www.domain.com/">BUTTON TEXT</a></div>

<div class="roundbutton"><a class="green" href="http://www.domain.com/">BUTTON TEXT</a></div>

<div class="roundbutton"><a class="blue" href="http://www.domain.com/">BUTTON TEXT</a></div>

<div class="roundbutton"><a class="gray" href="http://www.domain.com/">BUTTON TEXT</a></div>

<div class="roundbutton"><a class="dark" href="http://www.domain.com/">BUTTON TEXT</a></div>

Now replace link and button text

Thanks for being with us. You are requested to share the tutorial if you like

Tweet

CSS has become a integral part of a good looking blog.We designing is very important so as to leave a mark on your readers.A good looking site is always remembered by a reader.In order to get your readers attention their are certain tricks and tweaks by which you will be able to leave that WOW impression.There are some widgets which make use of CSS.These widgets have become very common and hence they are not that appealing.Their should be some element of surprise in your blog.Some blogs rely on external linking.Buttons are way better than the simple text links.Adding of buttons in your blog is not that difficult a task.Today I am going to show you a simple method by which you will be able to add the exciting new round cornered CSS buttons.These buttons are very easy to use.So let's go ahead and cut the cake. You can view a demo of this tutorial for better understanding View Demo CSS Code Add Go to blogger dashboard → Template → Edit Template Now find the following code using F3 ]]></b:skin> Now add the following CSS code just above it <link href='https://blogswidget.googlecode.com/svn/wiki/CSS3round.css' rel='stylesheet' type='text/css'/> Now save You are ready to put awesome CSS3 round button on your blog post or website HTML Code <div class="roundbutton"><a class="red" href="http://www.domain.com/">BUTTON TEXT</a></div> <div class="roundbutton"><a class="orange" href="http://www.domain.com/">BUTTON TEXT</a></div> <div class="roundbutton"><a class="green" href="http://www.domain.com/">BUTTON TEXT</a></div> <div class="roundbutton"><a class="blue" href="http://www.domain.com/">BUTTON TEXT</a></div> <div class="roundbutton"><a class="gray" href="http://www.domain.com/">BUTTON TEXT</a></div> <div class="roundbutton"><a class="dark" href="http://www.domain.com/">BUTTON TEXT</a></div> Now replace link and button text Thanks for being with us. You are requested to share the tutorial if you like