Create Multipurpose CSS3 Buttons with Icons


Apple iPhone 7 Plus (256 GB): for Best Commentators
Winner will be announced on 30 January 2017.


css3 buttons with icons
Buttons should be harmonious throughout a Web application, both visually and performance-wise. In this post, I proudly share a small collection of CSS3 buttons with icons. So itll help you to keep your website or blog with most advanced CSS or CSS3 widgets. As you see, thiss the original set of buttons, showing both a variety of purposes and styles in color. So follow the below steps thatll walk you through all the steps in grander detail.

The below screenshot will bring you an idea about what were gonna make right here. As I mentioned above each button has their own good looking color with an elegant hover style. If you would like to feel this buttons in action, can check out LS demo blog – The below screenshot was taken using latest versions of browsers and windows OS.

 Multi-Purpose CSS3 Buttons with Icons - Demo Screenshot

multi-purpose css3 buttons with icons
question mark icon Are this CSS3 Buttons possible to Add in Blogger Blog
Youll be capable to add this CSS3 button in your blogger blog so easily. But the CSS3 code snippet, which used to create both skin and hover effects is too corpulent. So youll be able to download the entire code snippet to your computer by clicking the “Download CSS3 Code Snippet” link provided below and download the whole CSS3 code snippet of this buttons.

Please note that the other sense which makes you to download this CSS3 code snippet havent any customization to put up. The downloaded CSS3 code snippet seems in a .zip format. So extract it all and use.

Multipurpose Buttons with Image Icons - Download CSS3 Code Snippet

You can also fiddle with the CSS3 to change the font name, dimensions, button color, hover color, button icon etc, only if you know a little bit of CSS3. Whats more its customizations are overly easy to update via CSS. But its only recommended not necessary.

I have already brought up how to add the downloaded CSS3 code snippet to your blogger template. To someone that hasnt looked at yet to this blog just follow the below simple steps.

  • 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>

Add the downloaded code right Above/Before of searched code and save your Template. In order to create the buttons, use the following HTML code snippet throughout your entire blog. Its possible to add the HTML code snippet in a Gadget too.

To add it in your blog post, switch your blog post from Compose to EDIT HTML while you writing post and place the below HTML code snippet in it. Or if you wanna add it in a Gadget follow below steps.

  • Go to Blogger Dashboard > Layout 
  • Click on Add a Gadget 
  • Copy & paste the below code in it

<a class="my-button medium blue" href="#"><img alt="" src="images/btn_info.png" />Information</a> 
<a class="my-button medium green" href="#"><img alt="" src="images/btn_ok.png" />Success</a> 
<a class="my-button medium orange" href="#"><img alt="" src="images/btn_warning.png" />Warning</a> 
<a class="my-button medium red" href="#"><img alt="" src="images/btn_error.png" />Error</a>
<a class="my-button medium black" href="#"><img alt="" src="images/btn_add.png" />Add New</a><br />
<a class="my-button medium green" href="#"><img alt="" src="images/btn_down.png" />Download</a> 
<a class="my-button medium purple" href="#"><img alt="" src="images/btn_up.png" />Upload</a> 
<a class="my-button medium dark" href="#"><img alt="" src="images/btn_help.png" />Help</a> 
<a class="my-button medium terra" href="#"><img alt="" src="images/btn_delete.png" />Delete</a>

Please Note: Replace all # with your button link URL and add alt tag for your buttons image icon if you want. You can also change the buttons texts along with icons with your own both texts and icons.

Also read: CSS3 Social Subscription Buttons with Sliding Effect

Once you have this buttons on your blog or website, we glad to here your feedback about how you are feeling them via comment. Happy blogging:)