Html button with background animation Hover Me
Html button with background animation <html lang="en"> <head> <title>Html button with background animation</title> <style> .btn-4 { background: linear-gradient(45deg, #4CAF50, #2196F3); color: #fff; border: none; border-radius: 5px; padding: 10px 20px; font-size: 16px; cursor: pointer; position: relative; overflow: hidden; transition: all 0.3s; } .btn-4::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background-color: rgba(255, 255, 255, 0.2); transition: all 0.3s; } .btn-4:hover::before { left: 0; } .btn-4 span { position: relative; z-index: 1; } </style> </head> <body> <button class="custom-btn btn-4"><span>Hover Me</span></button> </body> </html> You may like these posts : Write Your Comment
Html button with background animation <html lang="en"> <head> <title>Html button with background animation</title> <style> .btn-4 { background: linear-gradient(45deg, #4CAF50, #2196F3); color: #fff; border: none; border-radius: 5px; padding: 10px 20px; font-size: 16px; cursor: pointer; position: relative; overflow: hidden; transition: all 0.3s; } .btn-4::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background-color: rgba(255, 255, 255, 0.2); transition: all 0.3s; } .btn-4:hover::before { left: 0; } .btn-4 span { position: relative; z-index: 1; } </style> </head> <body> <button class="custom-btn btn-4"><span>Hover Me</span></button> </body> </html>
You may like these posts :