"Untitled"
Bootstrap 4.1.1 Snippet by iammohitverma

Post to Facebook Tweet this

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="preconnect" href="https://fonts.gstatic.com"> <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500&display=swap" rel="stylesheet"> <title>Document</title> <style> * { padding: 0px; margin: 0px; box-sizing: border-box; font-family: 'Poppins', sans-serif; } body { width: 100%; min-height: 100vh; display: flex; justify-content: center; align-items: center; background-color: #f1c40f; } a { text-decoration: none; font-weight: 500; font-size: 5rem; letter-spacing: 2px; position: relative; color: #fff; padding: 40px 100px; overflow: hidden; border: 5px solid #fff; } a::before { content: ''; width: 100%; height: 100%; background-color: #34495e; position: absolute; top: 0; left: 0; z-index: -1; transition: all 0.3s; transform: rotateY(90deg); } a:hover::before{ transform: rotateY(0deg); } a::after { content: ''; width: 100%; height: 100%; background-color: #e74c3c; background-color: #34495e; position: absolute; top: 0; left: 0; z-index: -1; transition: all 0.3s; transform: rotateX(90deg); } a:hover::after{ transform: rotateX(0deg); } a:hover { color: #fff; text-decoration: none; } </style> </head> <body> <a href="#">Hover Me</a> </body> </html>

Related: See More

Vue Material Dashboard PRO

Questions / Comments: