Beautiful CSS Buttons With Small and Large in Size

Small and Large CSS buttons for blogger
CSS takes very important role in website/blog designing. I had shared two blogger tutorial about CSS button and both were different. In this post I wanna share about cool/stylish CSS buttons for your blogger blog. It comes with mouse hover effect and two in size, Small Buttons and Large Buttons with different color. So you can choose your favorite color and size. Simply follow the below tutorial to add it in your blog.

As I mentioned above there are two types of buttons are available in this tutorial. Small Buttons and Large Buttons. At first we have to add the skin of these both buttons. that's adding CSS part into your blogger template. Lets see how to do it.

  • Go to Blogger Dashboard > Template
  • Backup your Template before making any changes to your blog
  • Click on Edit HTML
  • Tick Expand Widget Templates
  • Press Ctrl + F and search the code shown below ▼

]]></b:skin>

Now add the below code just Above/Before ]]></b:skin> (use Ctrl+F to find the code)

.awesome, .awesome:visited {
    background: #222 url(http://2.bp.blogspot.com/-Rugz3Sx02dI/UAr7ubzYL2I/AAAAAAAACT0/4g24oIDf0r8/s1600/overlayy.png) repeat-x;
    display: inline-block;
    padding: 5px 10px 6px;
    color: #fff;
    text-decoration: none;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
        border-radius:5px;
    -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
    -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
    text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
    border-bottom: 1px solid rgba(0,0,0,0.25);
    position: relative;
    cursor: pointer;
font-family:Calibri, Arial, sans-serif;
}

    .awesome:hover                            { background-color: #111; color: #fff; }
    .awesome:active                            { top: 1px; }
    .small.awesome, .small.awesome:visited             { font-size: 18px; padding: ; }
    .awesome, .awesome:visited,
    .medium.awesome, .medium.awesome:visited         { font-size: 24px; font-weight: bold; line-height: 1; text-shadow: 0 -1px 1px rgba(0,0,0,0.25); }
    .large.awesome, .large.awesome:visited             { font-size: 30px; padding: 8px 14px 9px; }
   
    .green.awesome, .green.awesome:visited        { background-color: #91bd09; }
    .green.awesome:hover                        { background-color: #749a02; }
    .blue.awesome, .blue.awesome:visited        { background-color: #2daebf; }
    .blue.awesome:hover                            { background-color: #007d9a; }
    .red.awesome, .red.awesome:visited            { background-color: #e33100; }
    .red.awesome:hover                            { background-color: #872300; }
    .magenta.awesome, .magenta.awesome:visited        { background-color: #a9014b; }
    .magenta.awesome:hover                            { background-color: #630030; }
    .orange.awesome, .orange.awesome:visited        { background-color: #ff5c00; }
    .orange.awesome:hover                            { background-color: #d45500; }
    .yellow.awesome, .yellow.awesome:visited        { background-color: #ffb515; }
    .yellow.awesome:hover                            { background-color: #fc9200; }

    .pink.awesome, .pink.awesome:visited        { background-color: #e22092; }
    .pink.awesome:hover                            { background-color: #c81e82; }


Click SAVE TEMPLATE. Now we have added the Skin (CSS) of these both buttons. The next step is adding HTML part to your blog post (use anywhere in your blog). Now we have to add two types of buttons named Large Buttons as well as Small Buttons. Lets begin with small buttons.

 How to add this buttons to your blog post
You just follow below two simple steps to do this task. that's all!

  • Switch your blog post from Compose to EDIT HTML while you writing post
  • Copy the following html code and paste It in your blog post where you waana display Small/Large buttons

add icon png For adding small buttons...
Before we adding this small buttons please take look at the demo image screenshot shown below which I have taken from my demo blog. Click on the below pic (ie, Small buttons seem as below ▼ image screenshot)


css3 small buttons for blogspot blog

<a href="Link" class="small awesome">Labstrike</a>
<a href="Link" class="small blue awesome">Labstrike</a>
<a href="Link" class="small pink awesome">Labstrike</a>
<a href="Link" class="small magenta awesome">Labstrike</a>
<a href="Link" class="small green awesome">Labstrike</a>
<a href="Link" class="small red awesome">Labstrike</a>
<a href="Link" class="small orange awesome">Labstrike</a>
<a href="Link" class="small yellow awesome">Labstrike</a>

css For adding large buttons...
Before we adding this Large buttons please take look at the demo image screenshot shown below which I have taken from my demo blog. Click on the below pic (ie, Large buttons seem as below ▼ image screenshot)


css3 small buttons for blogspot blog

<a href="Link" class="large awesome">Labstrike</a>
<a href="Link" class="large blue awesome">Labstrike</a>
<a href="Link" class="large pink awesome">Labstrike</a>
<a href="Link" class="large magenta awesome">Labstrike</a>
<a href="Link" class="large green awesome">Labstrike</a>
<a href="Link" class="large red awesome">Labstrike</a>
<a href="Link" class="large orange awesome">Labstrike</a>
<a href="Link" class="large yellow awesome">Labstrike</a>

warning icon png Replace Link with your URL and Labstrike with your button name of both small and large buttons.

You may also like -



Hope you like it. You can test this CSS trick in HTML editor before adding it in your blogspot blog. If you're facing any problem feel free to ask via comments. Happy blogging:)