Add Things To Your Web Page: Design #001

Source Code


<!-- Created by sachin-->

<html>

<head>

  <meta charset="utf-8">

  <title>menubar</title>

  <style>

   .outer{

                                  width:150px;

                                  height:50px;

                                 overflow-x:hidden;

                                  position:relative;

                                  float:left;

                                  margin-right:5px;

                                  margin-left:10px;

                                  border-radius:50px;

                                  }

                                  .inner{

                                  width:300px;

                                  height:50px;

                                  font:bold 16px/50px "arial";

                                  position: absolute; right:0;

                                  color:white;

                                  text-align:right;

                                  text-decoration:none;

                                  white-space:pre;

                                  transition:width .7s,color .7s;}

                                 

                                  .inner:before{

                                  content:"";

                                  position:absolute;

                                  width:139px;

                                  height:39px;

                                  right:5px;

                                  top:5px;

                                  border-radius:50px;

                                  border:1px dashed #333;

                                  }

                                  .color1{background:linear-gradient(60deg,blue 150px,#333 180px,#333);}

                                 .color2{background:linear-gradient(60deg,green 150px,#333 180px,#333);}

                                  .color3{background:linear-gradient(60deg,orange 150px,#333 180px,#333);}

                                  .color4{background:linear-gradient(60deg,pink 150px,#333 180px,#333);}

                                  .color5{background:linear-gradient(60deg,red 150px,#333 180px,#333);}

          .color6{background:linear-gradient(60deg,yellow 150px,#333 180px,#333);}

                                  .inner:hover{

                                  width:150px;

                                  color:black;}

                                  </style>

                                  </head>

                                  <body>

                                    

                                      <div class="outer">

                                   

                                                  <a href="##" class="inner color1">HOME    </a>

                                                  </div>

                                                  <div class="outer">

                                                  <a href="##" class="inner color2">ADMIN     </a>

                                                  </div>

                                                  <div class="outer">

                                                  <a href="##" class="inner color3">GALLERY     </a>

                                                  </div>

                                              
                                                  <div class="outer">

                                                  <a href="##" class="inner color4">COMMENT     </a>

                                                  </div>

                                                   <div class="outer">

                                                  <a href="##" class="inner color5">CONTACT   </a>
                                    </div>
                                                      
                                                  </body>

  </html>
Add Things To Your Web Page

Wednesday 25 September 2019

Design #001

Source Code

No comments:

Post a Comment
