Pure CSS Button
Change View
Left View
Top View
Right View
Full View
HTML
Animated Border Button
button
this is long button
CSS
body{ font-family: arial,helvetica; text-align: center;} h1{ line-height: 45px} .btn{ color: #E01E48; text-transform: uppercase; text-decoration: none; display: inline-block; padding: 0; position: relative; } .btn span{ display: block; padding:10px 13px; position: relative; } .btn:before, .btn:after, .btn span:before, .btn span:after{ content: ""; background: #E01E48; position: absolute; top: 0; left: 0; transition: all 0.15s ease-in-out 0s; } .btn:before, .btn:after{ width: 2px; height: 0; } .btn span:before, .btn span:after{ width: 0; height: 2px; transition-delay: 0.15s; } .btn:after{ top: auto; left: auto; right: 0; bottom: 0; } .btn span:before{ right: 0; left: auto; } .btn span:after{ top: auto; bottom: 0; } .btn:hover:before, .btn:hover:after{ height: 100%; transition-delay: 0.15s; } .btn:hover span:before, .btn:hover span:after{ width: 100%; transition-delay: 0s; }
Javascript