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>