buttons style : demo 5

HTML

                    
                

CSS

                    .btn:hover, .btn:focus{
                        outline: none;
                        color:#b8b8b8;
                    }
                    .btn{
                        border: 1px solid #b8b8b8;
                        color:#b8b8b8;
                        text-transform: capitalize;
                        padding: 10px 20px;
                    }
                    .btn:hover{
                        color:#b8b8b8;
                    }
                    .button{
                        position: relative;
                    }
                    .button:before, .button:after {
                        content: "";
                        border-style: solid;
                        position: absolute;
                        border-radius: 3px;
                        box-sizing: content-box;
                        transition:all 0.5s ease 0s;
                    }
                    .button:before {
                        width: 0;
                        height: 100%;
                        border-width: 1px 0 1px 0;
                        top: -1px;
                        left: 0;
                    }
                    .button:after {
                        width: 100%;
                        height: 0;
                        border-width: 0 1px 0 1px;
                        top: 0;
                        left: -1px;
                    }
                    .button:hover:before {
                        width: 100%;
                    }
                    .button:hover:after {
                        height: 100%;
                    }
                    .button.green:before, .button.green:after {
                        border-color: #2ecc71;
                    }
                    .button.green:hover {
                        color: #2ecc71;
                    }
                    .button.blue:before, .button.blue:after {
                        border-color: #3498db;
                    }
                    .button.blue:hover {
                        color: #3498db;
                    }
                    .button.purple:before, .button.purple:after {
                        border-color: #9b59b6;
                    }
                    .button.purple:hover {
                        color: #9b59b6;
                    }
                    .button.orange:before, .button.orange:after {
                        border-color: #e67e22;
                    }
                    .button.orange:hover {
                        color: #e67e22;
                    }
                    @media only screen and (max-width: 767px) {
                        .btn{
                            margin-bottom: 15px;
                        }
                    }