buttons style : demo 259

                        

                            

                                

                                    
                                        button
                                    
                                
                            
                        
                    

                        :root{
                            --black: #000;
                            --white: #fff;
                            --background: linear-gradient(45deg, #f12711, #f5af19);
                        }
                        .btn{
                            color: var(--black);
                            font-family: "Bellota", system-ui;
                            text-transform: capitalize;
                            letter-spacing: 1px;
                            padding: 0;
                            border-radius: 0;
                            border: none;
                            overflow: hidden;
                        } 
                        .btn:hover{  
                            color: transparent; 
                        }
                        .btn span{
                            display: block;
                            position: relative;
                            font-size: 22px;
                            font-weight: 700;
                            padding: 6px 12px;
                            transform-origin: 0 50%;
                            transform-style: preserve-3d;
                            transition: all 0.5s ease-in-out;
                        }
                        .btn:hover span{
                            transform: rotateX(90deg);
                        }
                        .btn span:before{
                            content: attr(data-hover);
                            color: var(--white);
                            background: var(--background);
                            width: 100%;
                            height: 100%;
                            padding: 6px 12px;
                            position: absolute;
                            top: 100%;
                            left: 0;
                            transition: all 0.35s linear;
                        }
                        .btn span:hover:before{
                            color: var(--white);
                            transform: rotateX(-90deg);
                        }
                        @media only screen and (max-width: 767px){
                            .btn{ margin-bottom: 30px; }
                        }