From f8913bca49722bc9bddba871f02f61a74ebeb193 Mon Sep 17 00:00:00 2001 From: Jayandhan R Date: Sat, 18 Mar 2023 05:59:58 +0530 Subject: [PATCH 1/7] Add files via upload --- index.html | 49 +++++++++++ styles.css | 232 +++++++++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 281 insertions(+) create mode 100644 index.html create mode 100644 styles.css diff --git a/index.html b/index.html new file mode 100644 index 000000000..5d3346d77 --- /dev/null +++ b/index.html @@ -0,0 +1,49 @@ + + + + + + + + + Document + + +
+

Button Animation +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+

+ + + diff --git a/styles.css b/styles.css new file mode 100644 index 000000000..44a21e638 --- /dev/null +++ b/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 From d83bdb480d78b37d2d67aa4866d179c7b11c8d19 Mon Sep 17 00:00:00 2001 From: Jayandhan R Date: Sat, 18 Mar 2023 07:13:47 +0530 Subject: [PATCH 2/7] Create readme.md --- public/Buttons/Jayandhan_21CSA48/readme.md | 1 + 1 file changed, 1 insertion(+) create mode 100644 public/Buttons/Jayandhan_21CSA48/readme.md diff --git a/public/Buttons/Jayandhan_21CSA48/readme.md b/public/Buttons/Jayandhan_21CSA48/readme.md new file mode 100644 index 000000000..8b1378917 --- /dev/null +++ b/public/Buttons/Jayandhan_21CSA48/readme.md @@ -0,0 +1 @@ + From 8e4e3e01b07d43ff759f7dfe95809925122d463d Mon Sep 17 00:00:00 2001 From: Jayandhan R Date: Sat, 18 Mar 2023 07:14:21 +0530 Subject: [PATCH 3/7] Add files via upload --- public/Buttons/Jayandhan_21CSA48/index.html | 49 +++++ public/Buttons/Jayandhan_21CSA48/styles.css | 232 ++++++++++++++++++++ 2 files changed, 281 insertions(+) create mode 100644 public/Buttons/Jayandhan_21CSA48/index.html create mode 100644 public/Buttons/Jayandhan_21CSA48/styles.css 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/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 From 19332ca517ed836e35ed771acdb6a185ef2da228 Mon Sep 17 00:00:00 2001 From: Jayandhan R Date: Sat, 18 Mar 2023 07:17:52 +0530 Subject: [PATCH 4/7] Delete index.html --- index.html | 49 ------------------------------------------------- 1 file changed, 49 deletions(-) delete mode 100644 index.html diff --git a/index.html b/index.html deleted file mode 100644 index 5d3346d77..000000000 --- a/index.html +++ /dev/null @@ -1,49 +0,0 @@ - - - - - - - - - Document - - -
-

Button Animation -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
-

- - - From a2e101d9858933395d27dcbbdf0a27d88ad8be6a Mon Sep 17 00:00:00 2001 From: Jayandhan R Date: Sat, 18 Mar 2023 07:18:10 +0530 Subject: [PATCH 5/7] Delete styles.css --- styles.css | 232 ----------------------------------------------------- 1 file changed, 232 deletions(-) delete mode 100644 styles.css diff --git a/styles.css b/styles.css deleted file mode 100644 index 44a21e638..000000000 --- a/styles.css +++ /dev/null @@ -1,232 +0,0 @@ -* { - 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 From b33441a9d7b9a014a469a370d414a52b038d90d1 Mon Sep 17 00:00:00 2001 From: Jayandhan R Date: Sat, 18 Mar 2023 07:22:23 +0530 Subject: [PATCH 6/7] Update readme.md --- public/Buttons/Jayandhan_21CSA48/readme.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/public/Buttons/Jayandhan_21CSA48/readme.md b/public/Buttons/Jayandhan_21CSA48/readme.md index 8b1378917..1137ac767 100644 --- a/public/Buttons/Jayandhan_21CSA48/readme.md +++ b/public/Buttons/Jayandhan_21CSA48/readme.md @@ -1 +1,3 @@ +# Animating Button +This code uses only html and css to bring the most stylish animations on the GUI. From f9f58956fb103699c22e3bfa4c2203a5213d036a Mon Sep 17 00:00:00 2001 From: Jayandhan R Date: Sat, 18 Mar 2023 07:22:49 +0530 Subject: [PATCH 7/7] Update readme.md --- public/Buttons/Jayandhan_21CSA48/readme.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/public/Buttons/Jayandhan_21CSA48/readme.md b/public/Buttons/Jayandhan_21CSA48/readme.md index 1137ac767..05f468398 100644 --- a/public/Buttons/Jayandhan_21CSA48/readme.md +++ b/public/Buttons/Jayandhan_21CSA48/readme.md @@ -1,3 +1,3 @@ # Animating Button -This code uses only html and css to bring the most stylish animations on the GUI. +This code uses only html and css to bring the most stylish animations on the GUI.🙂