buttons style : demo 20

CSS

                        .btn{
                            border-radius:0;
                            text-transform: uppercase;
                            transition: all 0.5s ease 0s;
                        }
                        .btn:hover{
                            animation-duration:1s;
                            animation-name:animate;
                        }
                        .btn.purple,
                        .btn.purple:hover{
                            border: 1px solid #580141;
                            color: #580141;
                        }
                        .btn.green,
                        .btn.green:hover{
                            border: 1px solid #396b1c;
                            color: #396b1c;
                        }
                        .btn.orange,
                        .btn.orange:hover{
                            border: 1px solid #e67e22;
                            color: #e67e22;
                        }
                        .btn.blue,
                        .btn.blue:hover{
                            border: 1px solid #3498db;
                            color: #3498db;
                        }
                        @keyframes animate{
                            0%{
                                transform: none;
                            }
                            10% {
                                transform: skewX(-15deg) skewY(-15deg);
                            }
                            30% {
                                transform: skewX(10deg) skewY(10deg);
                            }
                            50% {
                                transform: skewX(-3deg) skewY(-3deg);
                            }
                            70% {
                                transform: skewX(10deg) skewY(10deg);
                            }
                            80% {
                                transform: skewX(-0.7deg) skewY(-0.7deg);
                            }
                            90% {
                                transform: skewX(0.3deg) skewY(0.3deg);
                            }
                            100% {
                                transform: skewX(-0.1deg) skewY(-0.1deg);
                            }
                        }
                        @media only screen and (max-width: 767px) {
                            .btn{
                                margin-bottom: 15px;
                            }
                        }
                    
License Terms