From 24c69a567513d681974da5ce83d5c4cda0863c47 Mon Sep 17 00:00:00 2001 From: muskan-9 Date: Sun, 18 Oct 2020 14:03:32 +0530 Subject: [PATCH 1/2] button added --- css/buttons.css | 76 ++++++++++++++++++++++++++++++++++++++++++++++ pages/buttons.html | 35 +++++++++++++++++++++ 2 files changed, 111 insertions(+) diff --git a/css/buttons.css b/css/buttons.css index 693c8a3..2bf863b 100644 --- a/css/buttons.css +++ b/css/buttons.css @@ -126,4 +126,80 @@ /* James K Jose */ .jkj { background-color: #f79533; +} + + +/* Muskan */ + +.muskan { + color: #fff; + background: #111; + cursor: pointer; + position: relative; + z-index: 0; + border-radius: 10px; +} + +.muskan:before { + content: ""; + background: linear-gradient( + 45deg, + #ff0000, + #ff7300, + #fffb00, + #48ff00, + #00ffd5, + #002bff, + #7a00ff, + #ff00c8, + #ff0000 + ); + position: absolute; + top: -2px; + left: -2px; + background-size: 400%; + z-index: -1; + filter: blur(5px); + width: calc(100% + 5px); + height: calc(100% + 5px); + animation: glow 20s linear infinite; + opacity: 0; + transition: opacity 0.3s ease-in-out; + border-radius: 10px; +} + +@keyframes glow { + 0% { + background-position: 0 0; + } + 50% { + background-position: 400% 0; + } + 100% { + background-position: 0 0; + } +} + +.muskan:active { + color: #111; +} + +.muskan:active:after { + background: transparent; +} + +.muskan:hover:before { + opacity: 1; +} + +.muskan:after { + z-index: -1; + content: ""; + position: absolute; + width: 100%; + height: 100%; + background: #191919; + left: 0; + top: 0; + border-radius: 10px; } \ No newline at end of file diff --git a/pages/buttons.html b/pages/buttons.html index 9ab0bd2..23534e3 100644 --- a/pages/buttons.html +++ b/pages/buttons.html @@ -204,6 +204,41 @@

+ + +
+
+
+
+
+ Button +
+
+ +
+
+
+
+
+
+
+
+ Creator +
+
+
+

+ Name: + Muskan + +

+
+
+
+
+
+
+