Making stylized and animated HTML5 button a clickable link - HTML CSS HTML Tag

HTML CSS examples for HTML Tag:a

  1. HOME
  2. HTML CSS
  3. HTML Tag
  4. a

Description

Making stylized and animated HTML5 button a clickable link

Demo Code

ResultView the demo in separate window 

<html>
 <head> 
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
 </head> <!--from w  w  w.j av a  2 s .c om-->
 <body> 
  <style>

.DeptButton {
   display: inline-block;
   border-radius: 4px;
   background-color: #f7f7f7;
   border: none;
   text-decoration: none;
   text-align: center;
   font-size: 22px;
   padding: 10px 40px 0px 0px;
   width: 285px;
   transition: all 0.5s;
   cursor: pointer;
   margin: 15px;
}
.DeptButton span {
   cursor: pointer;
   display: inline-block;
   position: relative;
   transition: 0.5s;
}
.DeptButton span:after {
   content: '\00bb';
   position: absolute;
   opacity: 0;
   top: 25px;
   right: -55px;
   transition: 0.5s;
}
.DeptButton:hover span {
   padding-right: 40px;
}
.DeptButton:hover span:after {
   opacity: 1;
   right: -22px;
}
.DeptButton:hover {
   background-color: #f7f7f7;
   box-shadow: 0px 0px 20px 0 rgba(0,0,0,0.19);
}
.DeptButton a:link, a:visited, a:hover, a:active {
   text-decoration: none;
   display: inline-block;
   font-weight: normal;
}

      </style> 
  <a id="CLPButton" class="DeptButton" href="#foo"> <span> 
    <table style="width:120%"> 
     <tbody> 
      <tr> 
       <th> <img src="https://www.java2s.com/style/demo/Safari.png"> </th> 
       <th> Clinical Lab <br> Platforms </th> 
      </tr> 
     </tbody> 
    </table> </span> </a>  
 </body>
</html>

Related Tutorials