CODE:
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Image on image</title>
<style>
*{padding:0;margin:0;}
.main{text-align: center; margin-top: 330px; }
button {border: 1px solid teal; background: none; padding: 10px 20px;font-size: 20px; font-family: 'monospace';
cursor: pointer;margin: 10px; transition: 0.8s; position: relative; overflow: hidden;}
.btn1,.btn2{color: teal;}
.btn3,.btn4{color:#fff}
.btn1:hover,.btn2:hover{color: #fff;}
.btn3:hover,.btn4:hover{color: teal;}
button::before{content: ""; position: absolute; left: 0; width: 100%; height: 0%; background: turquoise;
z-index: -1;transition: 0.8s;}
.btn1::before,.btn3::before {top: 0; border-radius: 0 0 50% 50%;}
.btn2::before,.btn4::before {top: 0; border-radius: 50% 50% 0 0;}
.btn3::before,.btn4::before {height: 180%;}
.btn1:hover::before,.btn2:hover::before{height: 180%;}
.btn3:hover::before,.btn4:hover::before{height: 0%;}
</style>
</head>
<body>
<div class="main">
<div>
<!-- <input type="button" name="submit" type="button" value="Submit" /> -->
<button class="btn1">Hover Me</button>
<button class="btn2">Click Me</button><br /><br />
<button class="btn3">Click Me</button>
<button class="btn4">Hover Me</button>
</div>
</div>
</body>
</html>
OUTPUT:
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Image on image</title>
<style>
*{padding:0;margin:0;}
.main{text-align: center; margin-top: 330px; }
button {border: 1px solid teal; background: none; padding: 10px 20px;font-size: 20px; font-family: 'monospace';
cursor: pointer;margin: 10px; transition: 0.8s; position: relative; overflow: hidden;}
.btn1,.btn2{color: teal;}
.btn3,.btn4{color:#fff}
.btn1:hover,.btn2:hover{color: #fff;}
.btn3:hover,.btn4:hover{color: teal;}
button::before{content: ""; position: absolute; left: 0; width: 100%; height: 0%; background: turquoise;
z-index: -1;transition: 0.8s;}
.btn1::before,.btn3::before {top: 0; border-radius: 0 0 50% 50%;}
.btn2::before,.btn4::before {top: 0; border-radius: 50% 50% 0 0;}
.btn3::before,.btn4::before {height: 180%;}
.btn1:hover::before,.btn2:hover::before{height: 180%;}
.btn3:hover::before,.btn4:hover::before{height: 0%;}
</style>
</head>
<body>
<div class="main">
<div>
<!-- <input type="button" name="submit" type="button" value="Submit" /> -->
<button class="btn1">Hover Me</button>
<button class="btn2">Click Me</button><br /><br />
<button class="btn3">Click Me</button>
<button class="btn4">Hover Me</button>
</div>
</div>
</body>
</html>
OUTPUT:
No comments:
Post a Comment