Notes
- Apply for Button Block only. If you need to apply on Submit Button,.. please send me a message.
- Buttons on One Page. Add to Page Settings > Advanced > Header or Add Code Block > Insert code
- Buttons on Entire Site. Remove <style></style> and Add to Home > Design > Custom CSS
Button 01
<style> /* Button 01 */ /* button text border color */ .button-block a { color: #a34acb !important; border: 1px solid #a34acb !important; position: relative; background: transparent !important; overflow: hidden; z-index: 1; } /* Button hover background */ .button-block a:before { content: ""; display: block; position: absolute; top: -1px; left: 0; right: 0; bottom: -1px; background: #581974; transform: translate(-100%); transition: 0.5s ease-in-out; z-index: -1; } .button-block a:after { z-index: -1; } /* button text hover color */ .button-block a:hover { color: #e4caf0; } .button-block a:hover:before { transform: translate(0); } </style>
Button 02
<style> /* misc */ .button-block a:after, .button-block a:before { z-index: -1; transition: 0.5s ease-in-out; } /* button text border color */ .button-block a { color: #50915f !important; border: 1px solid #50915f !important; position: relative; background: transparent !important; overflow: hidden; z-index: 1; } /* button text hover */ .button-block a:hover { color: #ccdfd0 !important; } /* button hover */ .button-block a:before { content: ""; display: block; position: absolute; top: -1px; left: 0; right: -50px; bottom: -1px; border-right: 50px solid transparent; border-bottom: 80px solid #1d4b28; transform: translateX(-100%); -webkit-transform: translateX(-100%); } .button-block a:hover:before { transform: translateX(0); -webkit-transform: translateX(0); } </style>
Button 03
<style> /* misc */ .button-block a:after, .button-block a:before { z-index: -1; transition: 0.5s ease-in-out; } /* button text border color */ .button-block a { color: #5282be !important; border: 1px solid currentColor !important; position: relative; background: transparent !important; overflow: hidden; z-index: 1; } /* button text hover */ .button-block a:hover { color: #ccdaec !important; } /* button hover */ .button-block a:before, .button-block a:after { content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; border-bottom: 80px solid #1f416b; z-index: 10; } .button-block a:before { right: -50%; border-right: 50px solid transparent; -webkit-transform: translateX(-100%); transform: translateX(-100%); } .button-block a:after { left: -50%; border-left: 50px solid transparent; -webkit-transform: translateX(100%); transform: translateX(100%); } .button-block a:hover:before { -webkit-transform: translateX(-40%); transform: translateX(-40%); } .button-block a:hover:after { -webkit-transform: translateX(40%); transform: translateX(40%); } </style>