YahooBaba : Online Tutorials

HTML

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;
}

Pure CSS Button

HTML

CSS

Javascript