From 5e81f6b3c5bc4c706db8315c140768b68d5fdd16 Mon Sep 17 00:00:00 2001
From: Hvr123 <133820482+HarshVR1947@users.noreply.github.com>
Date: Sun, 22 Oct 2023 00:50:23 +0530
Subject: [PATCH] Create Animated Buttons in HTML

HTML file containing 4 Animated buttons
---
 Coding/HTML/Animated Buttons in HTML | 115 +++++++++++++++++++++++++++
 1 file changed, 115 insertions(+)
 create mode 100644 Coding/HTML/Animated Buttons in HTML
diff --git a/Coding/HTML/Animated Buttons in HTML b/Coding/HTML/Animated Buttons in HTML
new file mode 100644
index 00000000..e9a464f7
--- /dev/null
+++ b/Coding/HTML/Animated Buttons in HTML	
@@ -0,0 +1,115 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Question no.3</title>
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<style>
+.button1 {
+  position: relative;
+  background-color: #04AA6D;
+  border: none;
+  font-size: 28px;
+  color: #FFFFFF;
+  padding: 20px;
+  width: 200px;
+  text-align: center;
+  -webkit-transition-duration: 0.4s;
+  transition-duration: 0.4s;
+  text-decoration: none;
+  overflow: hidden;
+  cursor: pointer;
+}
+
+.button1:after {
+  content: "";
+  background: #90EE90;
+  display: block;
+  position: absolute;
+  padding-top: 300%;
+  padding-left: 350%;
+  margin-left: -20px!important;
+  margin-top: -120%;
+  opacity: 0;
+  transition: all 0.8s
+}
+
+.button1:active:after {
+  padding: 0;
+  margin: 0;
+  opacity: 1;
+  transition: 0s
+}
+.button2 {
+  padding: 15px 25px;
+  font-size: 24px;
+  text-align: center;
+  cursor: pointer;
+  outline: none;
+  color: #fff;
+  background-color: #ec0b0b;
+  border: none;
+  border-radius: 15px;
+  box-shadow: 0 9px #999;
+}
+
+.button2:hover {background-color: #ec0b0b}
+
+.button2:active {
+  background-color: #ec0b0b;
+  box-shadow: 0 5px #666;
+  transform: translateY(4px);
+}
+.button3 {
+  background-color: #eec890;
+  border: none;
+  color: white;
+  padding: 16px 32px;
+  text-align: center;
+  font-size: 16px;
+  margin: 4px 2px;
+  opacity: 0.6;
+  transition: 0.3s;
+}
+
+.button3:hover {opacity: 1}
+.button4 {
+  background-color: #f4511e;
+  border: none;
+  color: white;
+  padding: 16px 32px;
+  text-align: center;
+  font-size: 16px;
+  margin: 4px 2px;
+  opacity: 1;
+  transition: 0.3s;
+}
+
+.button4:hover {opacity: 0.6}
+.button5 {
+  background-color: #ddd;
+  border: none;
+  color: black;
+  padding: 16px 32px;
+  text-align: center;
+  font-size: 16px;
+  margin: 4px 2px;
+  transition: 0.3s;
+}
+
+.button5:hover {
+  background-color: #3e8e41;
+  color: white;
+}
+</style>
+</head>
+<body>
+
+<h2>Animated Button - Animation Effect</h2>
+
+<button class="button1">Click Me</button>
+<button class="button2">Click Me</button>
+<button class="button3">Hover</button>
+<button class="button4">Hover</button>
+<button class="button5">Hover</button>
+</body>
+</html>
