Cool CSS metro UI colorful button with icons codes


Guyz now make your website text buttons into icon buttons and make your website look attractive for the visitors and users. Metro UI colorful button.

Colorful buttons for making the website colorful



Steps

1) Login to your blogger account.
2) Click on template.
3) Go to Menu Css.
4) Change the Css with the below.
5) Now search for pages and change the existing code with the HTML code below.
6) Click Save Template and view your website.

CSS

<style>
.button {
font-family: 'Segoe UI', 'Open Sans', Arial, sans-serif;
display: block;
color: rgb(255, 255, 255);
text-decoration: none;
text-align: center;
padding: 10px;
margin: 15px 0px 0px 15px;
font-size: 18px;
text-transform: uppercase;
background: #ED5E2F;
color: #FFF;
border: 0px none;
outline: 0px none;
}
.button:hover {
background: #E67740;
}
.button:active {
background: #F6A953;
}
</style>
<style>
.button_blue {
font-family: 'Segoe UI', 'Open Sans', Arial, sans-serif;
display: block;
color: rgb(255, 255, 255);
text-decoration: none;
text-align: center;
padding: 10px;
margin: 15px 0px 0px 15px;
font-size: 18px;
text-transform: uppercase;
background: #3E5C9A;
color: #FFF;
border: 0px none;
outline: 0px none;
}
.button_blue:hover {
background: #6C8BCC;
}
.button_blue:active {
background: #3E5C9A;
}
</style>
<style>
.button_green {
font-family: 'Segoe UI', 'Open Sans', Arial, sans-serif;
display: block;
color: rgb(255, 255, 255);
text-decoration: none;
text-align: center;
padding: 10px;
margin: 15px 0px 0px 15px;
font-size: 18px;
text-transform: uppercase;
background: #44AD21;
color: #FFF;
border: 0px none;
outline: 0px none;
}
.button_green:hover {
background: #64BD46;
}
.button_green:active {
background: #44AD21;
}
</style>
<style>
.button_yellow {
font-family: 'Century Gothic', 'Open Sans', Arial, sans-serif;
display: block;
color: rgb(255, 255, 255);
text-decoration: none;
text-align: center;
padding: 10px;
margin: 15px 0px 0px 15px;
font-size: 18px;
text-transform: uppercase;
background: #E8E10C;
color: #FFF;
border: 0px none;
outline: 0px none;
}
.button_yellow:hover {
background: #EBE65B;
}
.button_yellow:active {
background: #E8E10C;
}
</style> 
<style>
.button_black {
font-family: 'Century Gothic', 'Open Sans', Arial, sans-serif;
display: block;
color: rgb(255, 255, 255);
text-decoration: none;
text-align: center;
padding: 10px;
margin: 15px 0px 0px 15px;
font-size: 18px;
text-transform: uppercase;
background: #2E2C2C;
color: #FFF;
border: 0px none;
outline: 0px none;
}
.button_black:hover {
background: #7A6E6A;
}
.button_black:active {
background: #2E2C2C;
}
</style>
<style>
.button_purple {
font-family: 'Century Gothic', 'Open Sans', Arial, sans-serif;
display: block;
color: rgb(255, 255, 255);
text-decoration: none;
text-align: center;
padding: 10px;
margin: 15px 0px 0px 15px;
font-size: 18px;
text-transform: uppercase;
background: #BF04A3;
color: #FFF;
border: 0px none;
outline: 0px none;
}
.button_purple:hover {
background: #FC7CE9;
}
.button_purple:active {
background: #BF04A3;
}
</style>

HTML
<button class="button">&#9812; KING</button>
<button class="button_blue">&#9819; QUEEN</button>
<button class="button_green">&#9820; ROOK</button>
<button class="button_yellow">&#9821; BISHOP</button>
<button class="button_purple">&#9823; PAWN</button>
   
Enjoy and Do comment.

Comments

Popular posts from this blog

How to add Guest Book Widget For Blogger and Websites

Nokia 9 Images Leak and We See Something Satisfying

Cool Android Setups #1