Demo of Buttons with style

<input type=button class='button1' value="button1">

button with border

Border-radious

Border-radious 50%

<style>
.button1{ 
 font-size: 20px;
 font-family:courier;
 background:#008cba;
 color:#FFFFFF; 
 padding: 15px 20px;
border:2px solid #f03000;//red
 }
</style>

.button2{ 
 font-size: 20px;
 font-family:courier;
 background:#f0f000;
 color:#000000; 
 padding: 25px 20px;
 border: 2px solid #0060c0;
 border-radius: 10px;
 }

.button3{ 
 font-size: 25px;
 font-family:Arial;
 background:#c03040;
 color:#ffffff; 
 padding: 15px 15px;
 border: 2px solid #000000;
 border-radius: 50%;
 }

Shadow

button hover

box-shadow on hover

.button4{ 
 font-size: 25px;
 font-family:courier;
 background:#f00000;
 color:#ffffff; 
 padding: 15px 20px;
 border: 2px solid #00f000;
 border-radius: 8px;
 box-shadow: 0 8px 15px 0 rgba(0,0,0,0.3), 0 5px 21px 0 rgba(0,0,0,0.18);
 }

 .button5{ 
 font-size: 25px;
 font-family:courier;
 background:#ffffff;
 color:#000000; 
 padding: 15px 20px;
 border: 2px solid #f00000;
 border-radius: 8px;
  }
.button5:hover {
background-color:#f00000;/*red*/
 color: white;
}

.button6{ 
 font-size: 25px;
 font-family:courier;
 background:#f00000;
 color:#ffffff; 
 padding: 15px 20px;
 border: 2px solid #00000f;
 border-radius: 8px;
  }
.button6:hover {
 box-shadow: 0 8px 15px 0 rgba(0,0,0,0.3), 0 5px 21px 0 rgba(0,0,0,0.18);
}

 

width:150px

width:250px

.button7{ 
background-color: #00f040;
color: white;
padding: 15px 32px;
font-size: 16px;
margin: 4px 2px;
width : 150px
border: 2px solid #00000f;
border-radius: 8px;
	}
	

.wd{
width : 250px
}