<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.