List of beautiful buttons with CSS, HTML for Blogspot - Part 1

You can add a button to your Blogger post or page using HTML and CSS code.

Style 1:

Hover me

    
	
        <div class="style1"> 
            <a href="#" class="button">Hover me</a> 
        </div>
    

    
	
.style1 .button {
	 display: inline-block;
	 padding: 0.75rem 1.25rem;
	 border-radius: 10rem;
	 color: #fff;
	 text-transform: uppercase;
	 font-size: 1rem;
	 letter-spacing: 0.15rem;
	 transition: all 0.3s;
	 position: relative;
	 overflow: hidden;
	 z-index: 1;
     text-decoration: none;
}
.style1 .button:after {
	 content: '';
	 position: absolute;
	 bottom: 0;
	 left: 0;
	 width: 100%;
	 height: 100%;
	 background-color: #0cf;
	 border-radius: 10rem;
	 z-index: -2;
}
.style1 .button:before {
	 content: '';
	 position: absolute;
	 bottom: 0;
	 left: 0;
	 width: 0%;
	 height: 100%;
	 background-color: #008fb3;
	 transition: all 0.3s;
	 border-radius: 10rem;
	 z-index: -1;
}
.style1 .button:hover {
	 color: #fff;
}
.style1 .button:hover:before {
	 width: 100%;
}