CSS Buttons


Go to main Page

Buttons in HTML

  1. To create a button in HTML document we use <button></button> tag.
  2. <button></button> tag defines clickable button.
  3. Inside a <button> element you can put text (and tags like <strong>, <br>, <img>, etc.). That is not possible with a button created with the <input> element!

Let us style a button


<!DOCTYPE html>

<head>
 <title>Document</title>
 <style>
     button{
   width: 200px;
   height: 35px;
   background-color: orangered;
   color:white;
   border:2px solid orangered;
   font-size: 22px;
   border-radius: 5px;
}
button:hover{
  background-color: transparent;
  color: orangered;

}
 </style>

</head>
<body>
    <button>I am Button</button>
</body>
</html>


CSS Round Button


<!DOCTYPE html>

<head>
 <title>Document</title>
 <style>
     button{
   width:200px;
   height:200px;
   background-color: orangered;
   color:white;
   border:2px solid orangered;
   font-size: 22px;
   border-radius: 50%;
}
button:hover{
  background-color: transparent;
  color: orangered;

}
 </style>

</head>
<body>
    <button>I am Button</button>
</body>
</html>