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.
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:
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:
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:
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: