CSS BUTTON

<div> <a href="http://fb.me/gab4r"> <span>HOVER ME</span> </a> </div> <style> *, *:before, *:after {transition:.5s linear;} body {background: #405669} div { position: fixed; display: inline-block; top: 50%; left: 50%; transform: translate(-50%, -50%); } a { text-decoration: none; display: inline-block; position: relative; } span { display: block; position: relative; padding: 20px 30px; margin: 0 15px; color: #EF6B30; font-family: 'Exo 2', sans-serif; font-size: 20px; } a:before, a:after, span:before, span:after, div:before, div:after { content: ""; position: absolute; background: #EFF5E6; } div:before { bottom: 0; left: 0; width: 2px; height: 100%; } div:after { top: 0; right: 0; width: 2px; height: 100%; } a:before { top: 0; left: 0; width: 100%; height: 2px; } a:after { bottom: 0; right: 0; width: 100%; height: 2px; } span:before { top: 0; left: 0; width: 2px; height: 100%; } span:after { bottom: 0; right: 0; width: 2px; height: 100%; } div:hover:before, div:hover:after, span:hover:before, span:hover:after {height:0;} a:hover:before, a:hover:after {width:0;} </style>
A simple css button effect!!

Be the first to comment

You can use [html][/html], [css][/css], [php][/php] and more to embed the code. Urls are automatically hyperlinked. Line breaks and paragraphs are automatically generated.