Fade Out and Underline Button
Look Demo
Add this animation to any button block. This plugin uses css editor and works with all template families.
How To Install
Add a button to any page with the solid style.
Once a button has been added and saved, go to the Custom CSS Editor. There are 4 styles available. Copy and paste one of the codes below into the Custom CSS Editor box.
Display line from left to right
// Fade Out Line Buttom - Left To Right // .sqs-block-button-element--small { position:relative; height: 60px; line-height: 60px; text-align: center; transition: 0.5s; padding: 0 20px; cursor: pointer; -webkit-transition:0.5s; } .sqs-block-button-element--small:hover { background-color: transparent; border-color: transparent; color: #000000; } .sqs-block-button-element--small:hover:before{ transition-delay: .2s; } .sqs-block-button-element--small::before{ width: 0%; height:100%; z-index: 3; content:''; position: absolute; bottom:-1px; left:0; box-sizing: border-box; transition: .2s; } .sqs-block-button-element--small:hover::before { width: 100% !important; transition: .7s; } .sqs-block-button-element--small::before { border-bottom: 2px solid #000000; }
Display line from right to left
// Fade Out Line Buttom - Right To Left // .sqs-block-button-element--small { position:relative; height: 60px; line-height: 60px; text-align: center; transition: 0.5s; padding: 0 20px; cursor: pointer; -webkit-transition:0.5s; } .sqs-block-button-element--small:hover { background-color: transparent; border-color: transparent; color: #000000; } .sqs-block-button-element--small:hover:before{ transition-delay: .2s; } .sqs-block-button-element--small::before{ width: 0%; height: 100%; z-index: 3; content: ''; position: absolute; bottom: -1px; right: 0; box-sizing: border-box; transition: .2s; } .sqs-block-button-element--small:hover::before { width: 100% !important; transition: .7s; } .sqs-block-button-element--small::before { border-bottom: 2px solid #000000; }
Display line from the middle and stretch out
// Fade Out Line Buttom - Middle Stretch Out // .sqs-block-button-element--small { position:relative; height: 60px; line-height: 60px; text-align: center; transition: 0.5s; padding: 0 20px; cursor: pointer; -webkit-transition:0.5s; } .sqs-block-button-element--small:hover { background-color: transparent; border-color: transparent; color: #000000; } .sqs-block-button-element--small:hover:before{ transition-delay: .2s; } .sqs-block-button-element--small::before{ width: 0%; height:100%; z-index: 3; content:''; position: absolute; bottom:-1px; right:50%; box-sizing: border-box; transition: .2s; } .sqs-block-button-element--small:hover::before { width: 100% !important; right: 0; transition: .7s; } .sqs-block-button-element--small::before { border-bottom: 2px solid #000000; }
Display line from the outside and stretch in
// Fade Out Line Buttom - Outside Stretch In // .sqs-block-button-element--small { position:relative; height: 60px; line-height: 60px; text-align: center; transition: 0.5s; padding: 0 20px; cursor: pointer; -webkit-transition:0.5s; } .sqs-block-button-element--small:hover { background-color: transparent; border-color: transparent; color: #000000; } .sqs-block-button-element--small:hover:before, .sqs-block-button-element--small:hover:after{ transition-delay: .2s; } .sqs-block-button-element--small::before{ width: 0%; height:100%; z-index: 3; content:''; position: absolute; bottom:-1px; left: 0; box-sizing: border-box; transition: .4s; } .sqs-block-button-element--small::after{ width: 0%; height:100%; z-index: 3; content:''; position: absolute; bottom:-1px; right: 0; box-sizing: border-box; transition: .4s; } .sqs-block-button-element--small:hover::before { width: 100% !important; transition: 1.4s; } .sqs-block-button-element--small:hover::after { width: 100% !important; transition: 1.4s; } .sqs-block-button-element--small::before, .sqs-block-button-element--small::after { border-bottom: 2px solid #000000; }
Customize
Replace the color #000000 value with the color of your choice.
The code works for the small button block. If you want to modify a medium or large button, replace all .sqs-block-button-element--small text with either .sqs-block-button-element--medium or .sqs-block-button-element--large.
License
This plugin comes with an Unlimited Use License. View License Terms