Widget:Hp-button

<style> .hp-btn-can {

   display: inline-block;
   position: relative;
   width: 220px;
   height: 100px;
   top: 0px;
   left: -10px;
   overflow: hidden;
   cursor: default;

}

.hp-btn-bg-can, .hp-btn-top-left-can, .hp-btn-top-right-can, .hp-btn-circuits-box-can, .hp-btn-circuits-can, .hp-btn-text-box-can, .hp-btn-text-can, .hp-btn-icon-can, .hp-btn-icon-can-1, .hp-btn-icon-can-2, .hp-btn-icon-can-3, .hp-btn-icon-can-4, .hp-btn-link-can {

 display: block;
 position: absolute;

}

.hp-btn-bg-can {

 top: 25px;
 left: 2px;

}

.hp-btn-top-left-can, .hp-btn-top-right-can {

 top: 10px;
 left: 15px;

}

.hp-btn-text-box-can {

 top: 40px;
 left: 63px;
 height: 36px;
 width: 130px;
 overflow: hidden;

}

.hp-btn-bg-can, .hp-btn-top-left-can, .hp-btn-top-right-can {

 filter: drop-shadow(0 0 2px black);
 transition: filter 1s;
 -webkit-transition: filter 1s;

}

.hp-btn-can:hover .hp-btn-bg-can, .hp-btn-can:hover .hp-btn-top-left-can, .hp-btn-can:hover .hp-btn-top-right-can {

 filter: drop-shadow(0 0 2px white);

}

.hp-btn-text-can {

 bottom: 50%;
 width: 110px;
 transform: translateY(50%);
 text-align: center;
 text-shadow: 0 0 2px black;
 color: #FFFFFF;
 font-size: 24px;
 font-weight: 700;
 left: 3px;
 transition: left 1s;
 -webkit-transition: left 1s;

}

.hp-btn-can:hover .hp-btn-text-can {

 left: 20px;

}

.hp-btn-icon-can {

 top: 0px;
 left: 0px;
 opacity: 0;
 transition: opacity 1s;
 -webkit-transition: opacity 1s;

}

.hp-btn-icon-can-1 {

 top: 70px;
 left: 108px;
 opacity: 0;
 transition: opacity 1s;
 -webkit-transition: opacity 0.8s;

}

.hp-btn-icon-can-2 {

 top: 70px;
 left: 118px;
 opacity: 0;
 transition: opacity 1s;
 -webkit-transition: opacity 1.6s;

}

.hp-btn-icon-can-3 {

 top: 70px;
 left: 126px;
 opacity: 0;
 transition: opacity 1s;
 -webkit-transition: opacity 2s;

}

.hp-btn-icon-can-4 {

 top: 25px;
 left: 2px;
 opacity: 0;
 transition: opacity 1s;
 -webkit-transition: opacity 1s;

}

.hp-btn-can:hover .hp-btn-icon-can {

 opacity: 1

}

.hp-btn-can:hover .hp-btn-icon-can-1 {

 opacity: 1

}

.hp-btn-can:hover .hp-btn-icon-can-2 {

 opacity: 1

}

.hp-btn-can:hover .hp-btn-icon-can-3 {

 opacity: 1

}

.hp-btn-can:hover .hp-btn-icon-can-4 {

 opacity: 1

}

.hp-btn-link-can {

 top: 33px;
 left: 40px;

}

.hp-btn-circuits-can {

 left: 0;
 bottom: 0;
 transition: left 6s;
 -webkit-transition: left 6s;

}

.hp-btn-circuits-box-can {

 bottom: 8px;
 left: 35px;
 width: 130px;
 overflow: hidden;

}

.hp-btn-can:hover .hp-btn-circuits-can {

 left: 0px;

}

</style>