Create Responsive Simple Button Using HTML And CSS





Its features:

  • It is completely responsive.

  • You can add a link to the name of each menu .

  • You can use the buttons any one side if you want.

  • The back image has a length of 110 pixels and a width of 41 pixels.

Try to create like yourself by following the codes below :


Step 1) Add to head :
<meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ font-awesome/4.7.0/css/font-awesome.min.css">
Step 2) Add to html :
<h2>Create Responsive Simple Button Using HTML And CSS</h2> <div class="dropdown02" style="float:left;"> <a href="file:///C:/Users/Abdul%20Awal/Desktop/New%20folder/index.html"> <button class="dropbtn02"> <i class="fa fa-home" style="font-size:24px;color:white"></i> Home </button> </a> </div> <div class="dropdown01" style="float:left;"> <button class="dropbtn01"> <i class='fab fa-blogger-b' style='font-size:20px;color:white'></i> Blog </button> <div class="dropdown01-content" style="left:0;"> <a href="#">Link 1</a> <a href="#">Link 2</a> <a href="#">Link 3</a> </div> </div> <div class="dropdown03" style="float:right;"> <button class="dropbtn03"> <i class="fas fa-bars" style="font-size:18px;color:white"></i> Menu </button> <div class="dropdown03-content"> <a href="#">Link 1</a> <a href="#">Link 2</a> <a href="#">Link 3</a> <a href="#">Link 4</a> <a href="#">Link 5</a> <a href="#">Link 6</a> <a href="#">Link 7</a> </div> </div> <div class="dropdown01" style="float:right;"> <button class="dropbtn01"> <i class="fa fa-group" style="font-size:20px;color:white"></i> Team </button> <div class="dropdown01-content"> <a href="#">Link 1</a> <a href="#">Link 2</a> <a href="#">Link 3</a> <a href="#">Link 4</a> </div> </div>
Step 3) Add to css :
header{ width:100%; height:100px; background-color:; } .dropdown01 { position: relative; display: inline-block; } .dropbtn01 { background-image: url('a1.png'); width:110px; height:41px; color: white; margin-top:27px; padding: 13px; font-size: 16px; border: none; cursor: pointer; } .dropdown01-content { display: none; position: absolute; right: 0; background-color: #f9f9f9; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 1; border:2px dashed green; border-radius:30px; } .dropdown01-content a { color: black; padding: 12px 16px; text-decoration: none; display: block; } .dropdown01-content a:hover {background-color:green;border-radius:15px;} .dropdown01:hover .dropdown01-content {display: block;} .dropdown01:hover .dropbtn01 {background-color: #3e8e41;} .dropbtn02 { background-image: url('a1.png'); width:110px; height:41px; color: white; margin-top:27px; padding: 10px; font-size: 16px; border: none; cursor: pointer; } .dropbtn03 { background-image: url('a1.png'); width:110px; height:41px; color: white; margin-top:27px; padding: 14px; font-size: 16px; border: none; cursor: pointer; } .dropdown03-content { display: none; position: absolute; right: 0; background-color: #f9f9f9; min-width: 160px; height:500px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 1; border:2px dashed green; border-radius:30px; } .dropdown03-content a { color: black; padding: 12px 16px; text-decoration: none; display: block; } .dropdown03-content a:hover {background-color: green;border-radius:15px;} .dropdown03:hover .dropdown03-content {display: block;} .dropdown03:hover .dropbtn03 {background-color: #3e8e41;}



Thank you sir

Congratulations to you on visiting our page.

If you have any feedback, you can give advice through the "Contact Me" form.