How to styling HTML buttons using CSS?

This is an example of an HTML button.
code: <button type="button">PRESS</button>
result:

We will show some of the ways to use the CSS language to stylize the HTML button with hover effects.

simple button circle button recentangular button



CSS simple button with CSS hover effects

code:




<button class="a">PRESS</button>


 .a {
  color:white;
  font-weight:bold;
  font-size:25px;
  background-color:red;
  border:3px solid #7C1C01;   
  border-radius:5px;
  text-decoration:none;
  padding:1px 10px 1px 10px;
}
.a:hover {
  background-color:white;
  color:#7C1C01;


JSFiddle

result:




















CSS rectangular button with hover effects

code:




<button class="b">PRESS</button>


.b{
   border-top:        5px solid #a3ceda;
   border-left:        5px solid #a3ceda;
   border-right:    5px solid #4f6267;
   border-bottom:    5px solid #4f6267;
   height: 65px;
   width: 160px;
   padding: 10px 25px;
   font-size: 25px;
   background-color: #c4f1fe;
   font-weight: bold;
   color:    #2d525d;
 }
.b:hover {
   background: #28597a;
   color: #ccc;
 }

JSFiddle

result:






















CSS circle button with hover effects

code:




<button class="c">PRESS</button>


.c {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background:green;
  color:white;
  font-weight: bold;
  border: 8px solid #143795;
  }
.c:hover {
  background: #28597a;
  border-color:#3387E5;
  color: red;   
  }

result:














JSFiddle