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 3D button



Example CSS simple button with CSS hover effects

code:




<button class="a">BUTTON</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;


result:













JSFiddle




Example CSS rectangular button with hover effects

code:




<button class="b">BUTTON</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;
 }

result:













JSFiddle




Example CSS circle button with hover effects

code:




<button class="c">BUTTON</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





Example CSS 3D button with hover effects

code:




<button class="d">CLICK ME</button>


.d {
background-color:black;
border:2px solid white;
color:white;
font-size:17px;
font-weight:bold;
padding:3px 6px;
text-decoration:none;
border-top:    9px solid #F0F0F0;
border-left:   9px solid lightgray;
border-right:  9px solid lightgray;
border-bottom: 9px solid #4f6267;
}
.d:hover {
border-top:    9px solid #4f6267;
border-left:   9px solid lightgray;
border-right:  9px solid lightgray;
border-bottom: 9px solid #F0F0F0;
}

result:











JSFiddle





Privacy Policy