Thursday, November 22, 2012

Add CSS3 Round Buttons For Website

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='' 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="">BUTTON TEXT</a></div>
    <div class="roundbutton"><a class="orange" href="">BUTTON TEXT</a></div>
    <div class="roundbutton"><a class="green" href="">BUTTON TEXT</a></div>
    <div class="roundbutton"><a class="blue" href="">BUTTON TEXT</a></div>
    <div class="roundbutton"><a class="gray" href="">BUTTON TEXT</a></div>
    <div class="roundbutton"><a class="dark" href="">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

    Click Here To add Comment