CSS Buttons || Buttons in CSS
In this video,I explained the CSS Buttons. Feel free to comment. For more, please subscribe and press the BELL icon. Please visit my CSS Playlist. Please link, comment, share and subscribe. The code is as follows -
HTML File -
<html>
<head> <title> CSS Buttons </title>
<link rel="stylesheet" href="css_buttons.css">
</head>
<body>
<button class="btn1"> Button 1 </button>
<button class="btn2"> Button 2 </button>
<button class="btn3"> Button 3 </button>
<button class="btn4"> Button 4 </button>
<button class="btn5"> Button 5 </button>
</body>
</html>
CSS File -
.btn1 {
background-color: lightgreen;
border: none;
padding: 20px 20px;
margin: 15px 15px;
color: white;
text-align: center;
display: inline-block;
font-size: 15px;
float: left;
cursor: pointer;
}
.btn2 {
background-color: lightpink;
border: 2px solid red;
padding: 20px 20px;
margin: 15px 15px;
color: black;
text-align: center;
display: inline-block;
font-size: 15px;
float: left;
cursor: pointer;
}
.btn3 {
padding: 50px 50px;
margin: 30px 30px;
color: black;
text-align: center;
display: inline-block;
float: left;
}
.btn4 {
font-size: 35px;
text-align: center;
display: inline-block;
float: left;
}
.btn5 {
background-color: lightgreen;
border: none;
padding: 20px 20px;
margin: 15px 15px;
color: white;
text-align: center;
display: inline-block;
font-size: 15px;
float: left;
cursor: pointer;
border-radius: 50%;
}
.btn1:hover {
background-color: pink;
border: 1px solid black;
text-decoration: underline;
color: lightred;
text-align: center;
}
HTML File -
<html>
<head> <title> CSS Buttons </title>
<link rel="stylesheet" href="css_buttons.css">
</head>
<body>
<button class="btn1"> Button 1 </button>
<button class="btn2"> Button 2 </button>
<button class="btn3"> Button 3 </button>
<button class="btn4"> Button 4 </button>
<button class="btn5"> Button 5 </button>
</body>
</html>
CSS File -
.btn1 {
background-color: lightgreen;
border: none;
padding: 20px 20px;
margin: 15px 15px;
color: white;
text-align: center;
display: inline-block;
font-size: 15px;
float: left;
cursor: pointer;
}
.btn2 {
background-color: lightpink;
border: 2px solid red;
padding: 20px 20px;
margin: 15px 15px;
color: black;
text-align: center;
display: inline-block;
font-size: 15px;
float: left;
cursor: pointer;
}
.btn3 {
padding: 50px 50px;
margin: 30px 30px;
color: black;
text-align: center;
display: inline-block;
float: left;
}
.btn4 {
font-size: 35px;
text-align: center;
display: inline-block;
float: left;
}
.btn5 {
background-color: lightgreen;
border: none;
padding: 20px 20px;
margin: 15px 15px;
color: white;
text-align: center;
display: inline-block;
font-size: 15px;
float: left;
cursor: pointer;
border-radius: 50%;
}
.btn1:hover {
background-color: pink;
border: 1px solid black;
text-decoration: underline;
color: lightred;
text-align: center;
}
Comments
Post a Comment