diff --git a/public/Buttons/Jayandhan_21CSA48/index.html b/public/Buttons/Jayandhan_21CSA48/index.html
new file mode 100644
index 000000000..5d3346d77
--- /dev/null
+++ b/public/Buttons/Jayandhan_21CSA48/index.html
@@ -0,0 +1,49 @@
+
+
+
+
+
+
+
+
+ Document
+
+
+
+Button Animation
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/Buttons/Jayandhan_21CSA48/readme.md b/public/Buttons/Jayandhan_21CSA48/readme.md
new file mode 100644
index 000000000..05f468398
--- /dev/null
+++ b/public/Buttons/Jayandhan_21CSA48/readme.md
@@ -0,0 +1,3 @@
+# Animating Button
+
+This code uses only html and css to bring the most stylish animations on the GUI.🙂
diff --git a/public/Buttons/Jayandhan_21CSA48/styles.css b/public/Buttons/Jayandhan_21CSA48/styles.css
new file mode 100644
index 000000000..44a21e638
--- /dev/null
+++ b/public/Buttons/Jayandhan_21CSA48/styles.css
@@ -0,0 +1,232 @@
+* {
+ font-size: 10px;
+ font-family: "Ubuntu", sans-serif;
+ }
+
+ body {
+ background: linear-gradient(to bottom right, #5533ff, #38e2ee);
+ background-size: cover;
+ background-repeat: no-repeat;
+ min-height: 100vh;
+ position: relative;
+ }
+
+ .main-contain {
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ max-width: 180rem;
+ margin: auto;
+ }
+
+ h1 {
+ font-size: 6rem;
+ padding: 1rem;
+ text-align: center;
+ color: white;
+ font-weight: 500;
+ margin: 5rem 0 0 0;
+ }
+
+ button {
+ border: none;
+ text-decoration: none;
+ color: rgba(255, 255, 255, 0.95);
+ cursor: pointer;
+ }
+
+ .div {
+ padding-top: 50px;
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: space-around;
+ text-align: center;
+ position: relative;
+ max-width: 1200px;
+ margin: auto;
+ }
+
+ .psuedo-text {
+ color: #5533ff;
+ position: relative;
+ top: 0;
+ height: 100%;
+ width: 100%;
+ display: inline;
+ height: auto;
+ font-size: 1.7rem;
+ font-size: 700;
+ transition: 0.25s ease-in;
+ transition-delay: 0.1s;
+ }
+
+ .flex-1 {
+ flex: 1;
+ min-width: 250px;
+ margin: 0 auto 50px;
+ }
+
+ .button {
+ padding: 2rem 7rem;
+ background: white;
+ text-align: center;
+ display: inline-block;
+ font-size: 1.7rem;
+ text-transform: uppercase;
+ font-weight: 700;
+ position: relative;
+ will-change: transform;
+ }
+
+ .button-mat {
+ color: #5533ff;
+ border: 0px transparent;
+ border-radius: 0.3rem;
+ transition: 0.3s ease-in-out;
+ transition-delay: 0.35s;
+ overflow: hidden;
+ }
+ .button-mat:before {
+ content: "";
+ display: block;
+ background: #401aff;
+ position: absolute;
+ width: 200%;
+ height: 500%;
+ border-radius: 100%;
+ transition: 0.36s cubic-bezier(0.4, 0, 1, 1);
+ }
+ .button-mat:hover .psuedo-text {
+ color: white;
+ }
+ .button-mat:hover {
+ color: transparent;
+ }
+
+ .btn-1 {
+ letter-spacing: 0.05rem;
+ transition: 0.5s all ease-in-out;
+ position: relative;
+ background: transparent;
+ }
+ .btn-1:before {
+ border-top: 0.3rem solid white;
+ border-bottom: 0.3rem solid white;
+ display: block;
+ position: absolute;
+ background: transparent;
+ content: "";
+ top: 0;
+ bottom: 0;
+ left: 100%;
+ right: 100%;
+ transition: 0.48s all ease-in-out;
+ }
+ .btn-1:hover {
+ letter-spacing: 0.4rem;
+ }
+ .btn-1:hover:before {
+ left: 25%;
+ right: 25%;
+ }
+
+ .btn-2 {
+ letter-spacing: 0.05rem;
+ position: relative;
+ background: white;
+ color: #401aff;
+ border-radius: 0.3rem;
+ position: relative;
+ transition: 0.2s all ease-in-out;
+ }
+ .btn-2:before {
+ display: block;
+ position: absolute;
+ background: transparent;
+ border: none;
+ border-radius: 0.3rem;
+ transform: translateY(5px) scale(0.9);
+ content: "";
+ height: 5px;
+ z-index: -1;
+ bottom: -1%;
+ left: 0;
+ right: 0;
+ transition: 0.2s all ease-in-out;
+ box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
+ }
+ .btn-2:hover:before {
+ transform: translateY(8px) scale(0.8);
+ opacity: 0.8;
+ box-shadow: 0 19px 38px rgba(0, 0, 0, 0.3), 0 15px 12px rgba(0, 0, 0, 0.22);
+ }
+ .btn-2:hover {
+ transform: translateY(-5px);
+ }
+
+ .btn-3 {
+ letter-spacing: 0.05rem;
+ position: relative;
+ background: white;
+ color: #401aff;
+ overflow: hidden;
+ transition: 0.3s ease-in-out;
+ border-radius: 0.3rem;
+ z-index: 1;
+ box-shadow: 0 19px 38px rgba(0, 0, 0, 0.3), 0 15px 12px rgba(0, 0, 0, 0.22);
+ }
+ .btn-3:hover {
+ box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
+ transform: scale(0.95);
+ }
+
+ .btn-4 {
+ background: rgba(0, 0, 0, 0.1);
+ box-shadow: 0px 0px 0px 5px rgba(255, 255, 255, 0.95);
+ border: 1px solid white;
+ transition: 0.3s all ease-in-out;
+ }
+ .btn-4:hover {
+ background: rgba(0, 0, 0, 0.2);
+ box-shadow: 0px 0px 10px 5px rgba(255, 255, 255, 0.85);
+ }
+
+ .btn--5 {
+ box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
+ }
+ .btn--5:before {
+ transform: translate(-120%, -50%) translateZ(0);
+ }
+ .btn--5:hover:before {
+ transform: translate(-45%, -34%) translateZ(0);
+ }
+
+ .btn--6 {
+ box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
+ }
+ .btn--6:before {
+ transform: translate(40%, -50%) translateZ(0);
+ }
+ .btn--6:hover:before {
+ transform: translate(-45%, -34%) translateZ(0);
+ }
+
+ .btn--7 {
+ box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
+ }
+ .btn--7:before {
+ transform: translate(-110%, -110%) translateZ(0);
+ }
+ .btn--7:hover:before {
+ transform: translate(-45%, -34%) translateZ(0);
+ }
+
+ .btn--8 {
+ box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
+ }
+ .btn--8:before {
+ transform: translate(30%, 10%) translateZ(0);
+ }
+ .btn--8:hover:before {
+ transform: translate(-45%, -34%) translateZ(0);
+ }
\ No newline at end of file