Animated-Colored CSS Navigation Menu Buttons For Bloggers

Tweet

CSS menu buttons are the most widely used buttons on web. You will see CSS buttons on every second site. The reason behind the popularity of these buttons is the simplicity of these buttons. Very easy to use and looks awesome on any website/blog. You can add hundred of new things manually in your buttons. Very easy to customize. Any one who now the basic knowledge can develop these buttons. Today we are sharing with you very beautiful and most used CSS buttons. Hope you will like these buttons. Let's see how to add these buttons. Series on Navigation Menus  Add Vertical Navigation Menu In Blog with Hover Stretching Effects (Published)  Vertical Navigation Menu With Hover Fader and Animated Effects (Published)  Animated-Colored CSS Navigation Menu Buttons For Bloggers   (Current) Adding CSS Navigation Menu Buttons 1. Go to blogger and open your dashboard. (Backup your template before making any changes) 2. Now go to Templates==> Edit HTML==> Proceed . 3. Now search 4. Paste the below CSS code link file after . <link href='https://sites.google.com/site/howdoblog/how-to-blog/buttons.css' media='all' rel='stylesheet'/>   5. Now click on save template. 6. Now go to Layout==> Add a Gadget==> HTML/Javascript . 7. Paste the below code in empty box and save it. <a class="button golden" href="#"> About US </a> <a class="button graphite" href="#"> Product </a> <a class="button mint" href="#"> Services </a> <a class="button white" href="#"> Technology </a> <a class="button turquoise" href="#"> Solutions </a> <a class="button emerald" href="#"> My Acount </a> <a class="button royalblue" href="#"> Store Locator </a> <a class="button silver" href="#"> Investor </a> <a class="button cyan" href="#"> Support </a> <a class="button cyan" href="#"> Contact US </a>  8. Here is demo for you. Live Demo  Replace # and first link with URL of your pages. Currently these colors are present in this collection.  red, orange, woody, pink, graphite, turqoise, emerald, grass, blue, royalblue, brown, darkbrown, mint, grape, magenta, purple, darkgrey, silver, golden, black, white, cyan. This is very easy method to add buttons in your post,in sidebar or you can use it for navigation menus. Previously we have shared two types of navigation menus and we have mention there that we will share 3rd type of navigation menu with you soon. we will keep sharing that type of buttons and menus with you in future. Keep visiting our blog and subscribe to get latest updates.  Want To Add More Colors  If you want to add more colors to these buttons you can manually add by yourself. You just need to download buttons.css file and to add the code of that color.  If you can't do it by yourself you can ask me. I will do it for you.  This is all for today. you can ask us for help. Have a Nice day.

CSS menu buttons are the most widely used buttons on web. You will see CSS buttons on every second site. The reason behind the popularity of these buttons is the simplicity of these buttons. Very easy to use and looks awesome on any website/blog. You can add hundred of new things manually in your buttons. Very easy to customize. Any one who now the basic knowledge can develop these buttons. Today we are sharing with you very beautiful and most used CSS buttons. Hope you will like these buttons. Let's see how to add these buttons.

Series on Navigation Menus

 Add Vertical Navigation Menu In Blog with Hover Stretching Effects (Published)

 Vertical Navigation Menu With Hover Fader and Animated Effects (Published)

 Animated-Colored CSS Navigation Menu Buttons For Bloggers  
(Current)

Adding CSS Navigation Menu Buttons

1. Go to blogger and open your dashboard.

(Backup your template before making any changes)

2. Now go to Templates==> Edit HTML==> Proceed .

3. Now search

4. Paste the below CSS code link file after .

<link href='https://sites.google.com/site/howdoblog/how-to-blog/buttons.css' media='all' rel='stylesheet'/>  
5. Now click on save template.

6. Now go to Layout==> Add a Gadget==> HTML/Javascript .

7. Paste the below code in empty box and save it.

<a class="button golden" href="#"> About US </a> <a class="button graphite" href="#"> Product </a> <a class="button mint" href="#"> Services </a> <a class="button white" href="#"> Technology </a> <a class="button turquoise" href="#"> Solutions </a> <a class="button emerald" href="#"> My Acount </a> <a class="button royalblue" href="#"> Store Locator </a> <a class="button silver" href="#"> Investor </a> <a class="button cyan" href="#"> Support </a> <a class="button cyan" href="#"> Contact US </a>

 8. Here is demo for you.

Live Demo

 Replace # and first link with URL of your pages.

Currently these colors are present in this collection. 

red, orange, woody, pink, graphite, turqoise, emerald, grass, blue, royalblue, brown, darkbrown, mint, grape, magenta, purple, darkgrey, silver, golden, black, white, cyan.

This is very easy method to add buttons in your post,in sidebar or you can use it for navigation menus. Previously we have shared two types of navigation menus and we have mention there that we will share 3rd type of navigation menu with you soon. we will keep sharing that type of buttons and menus with you in future. Keep visiting our blog and subscribe to get latest updates.

 Want To Add More Colors 

If you want to add more colors to these buttons you can manually add by yourself. You just need to download buttons.css file and to add the code of that color.  If you can't do it by yourself you can ask me. I will do it for you.  This is all for today. you can ask us for help. Have a Nice day.

Follow @howdoblog

Subscribe to Our Newsletter

Learn Blogger Tips and Tricks and Subscribe to get daily updates right into your inbox