From c96cb951e3057adb8ee5518e182ef3d9ae7efa03 Mon Sep 17 00:00:00 2001
From: Veera2222jc58 <2222jc58@kgcas.com>
Date: Sat, 18 Mar 2023 12:12:25 +0530
Subject: [PATCH] animating-button
---
public/Buttons/Veera58/intex.html | 16 ++++++++++
public/Buttons/Veera58/style.css | 52 +++++++++++++++++++++++++++++++
2 files changed, 68 insertions(+)
create mode 100644 public/Buttons/Veera58/intex.html
create mode 100644 public/Buttons/Veera58/style.css
diff --git a/public/Buttons/Veera58/intex.html b/public/Buttons/Veera58/intex.html
new file mode 100644
index 000000000..44c94f16e
--- /dev/null
+++ b/public/Buttons/Veera58/intex.html
@@ -0,0 +1,16 @@
+
+
+
+
+
+
+
+ Document
+
+
+
+
+ Button
+
+
+
\ No newline at end of file
diff --git a/public/Buttons/Veera58/style.css b/public/Buttons/Veera58/style.css
new file mode 100644
index 000000000..165e44230
--- /dev/null
+++ b/public/Buttons/Veera58/style.css
@@ -0,0 +1,52 @@
+* {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+ font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+}
+
+body {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ min-height: 100vh;
+ background-color: gray;
+}
+
+a {
+ position: relative;
+ padding: 20px;
+ text-align: center;
+ width: 200px;
+ background: linear-gradient(to right, #d71949, rgba(80, 37, 208, 0.871), rgb(17, 72, 135), #9bb9e0, #24ded5);
+ border-radius: 1000px;
+ text-decoration: navy;
+ font-size: 16px;
+ font-weight: 600;
+ background-size: 300% 100%;
+ transition: all .3s ease-in-out;
+ -o-transition: all .3s ease-in-out;
+ -webkit-transition: all .3s ease-in-out;
+ transition: all .3s ease-in-out;
+ color: white;
+}
+
+a:hover {
+ background-position: 100% 0;
+ transition: all .3s ease-in-out;
+ -o-transition: all .3s ease-in-out;
+ -webkit-transition: all .3s ease-in-out;
+ animation: gradient 2s ease infinite;
+}
+
+@keyframes gradient {
+ 0% {
+ background-position: 0% 50%;
+ }
+ 50% {
+ background-position: 100% 50%;
+ }
+ 100% {
+ background-position: 0% 50%;
+ }
+}
\ No newline at end of file