Add Things To Your Web Page: Design #005

Source Code


<!-- Created by sachin-->

<!DOCTYPE html>
<html>
<head>
   <title> Try It Yourself </title>
   <style type="text/css">
       .dd {
         position: relative;
         display: inline-block;
      }
      .dd-btn {
         padding: 15px;
         text-align: center;
         background: #173459;
         border: none;
         width: 300px;
         color: #f8f9f9;
      }
      .dd-content {
         position: absolute;
         width: 100%;
         box-shadow: 0 18px 36px rgba(0,0,0,0.30), 0 14px 11px rgba(0,0,0,0.22);
         height: 0px;
         transition: height 1s;
         overflow: hidden;
      }
      .dd:hover > .dd-content {
         height: 150px;
      }
      .dd-content > a {
         display: block;
         padding: 15px;
         text-decoration: none;
         color: black;
      }
	  </style>
</head>
<body>
<center>
   <div class="dd">
      <button class="dd-btn"> Menu (Hover On Me)</button>
      <div class="dd-content">
        
         <a href="#"> Home </a>
         <a href="#"> About </a>
         <a href="#"> Articles </a>
      </div>
   </div>
   </center>
</body>
</html>

Add Things To Your Web Page

Sunday 3 January 2021

Design #005

Source Code

No comments:

Post a Comment