diff --git a/buttons/102-button-glowblo/glow-blo.css b/buttons/102-button-glowblo/glow-blo.css new file mode 100644 index 0000000..a66b3b1 --- /dev/null +++ b/buttons/102-button-glowblo/glow-blo.css @@ -0,0 +1,126 @@ +.winky-rough { + font-family: "Winky Rough", sans-serif; + font-optical-sizing: auto; + font-weight: 600; + font-style: normal; +} + +body { + margin: 0; + display: flex; + justify-content: center; + align-items: center; + min-height: 100vh; + background-color: #f0f0f0; +} + +.button { + position: relative; + padding: 10px 22px; + border-radius: 6px; + font-size: 2em; + border: none; + color: #000000; + cursor: pointer; + background-color: #41c1e4; + transition: background-color 0.5s ease; + display: inline-block; + font-family: "Winky Rough", sans-serif; + font-optical-sizing: auto; + font-weight: 700; + font-style: normal; +} + +.button:hover { + background-color: #41e45f; +} + +.button:active { + transform: scale(0.9); +} + +.button:before, +.button:after { + position: absolute; + content: ""; + width: 150%; + left: 50%; + height: 100%; + transform: translateX(-50%); + z-index: -1000; + background-repeat: no-repeat; +} + +.button:active:before { + top: -70%; + background-image: radial-gradient(circle, #415ce4 20%, transparent 20%), + radial-gradient(circle, transparent 20%, #415ce4 20%, transparent 30%), + radial-gradient(circle, #415ce4 20%, transparent 20%), + radial-gradient(circle, #415ce4 20%, transparent 20%), + radial-gradient(circle, transparent 10%, #415ce4 15%, transparent 20%), + radial-gradient(circle, #415ce4 20%, transparent 20%), + radial-gradient(circle, #415ce4 20%, transparent 20%), + radial-gradient(circle, #415ce4 20%, transparent 20%), + radial-gradient(circle, #415ce4 20%, transparent 20%); + background-size: 10% 10%, 20% 20%, 15% 15%, 20% 20%, 18% 18%, 10% 10%, 15% 15%, + 10% 10%, 18% 18%; + background-position: 50% 120%; + animation: greentopBubbles 1.0s ease; +} + +@keyframes greentopBubbles { + 0% { + background-position: 5% 90%, 10% 90%, 10% 90%, 15% 90%, 25% 90%, 25% 90%, + 40% 90%, 55% 90%, 70% 90%; + } + + 50% { + background-position: 0% 80%, 0% 20%, 10% 40%, 20% 0%, 30% 30%, 22% 50%, + 50% 50%, 65% 20%, 90% 30%; + } + + 100% { + background-position: 0% 70%, 0% 10%, 10% 30%, 20% -10%, 30% 20%, 22% 40%, + 50% 40%, 65% 10%, 90% 20%; + background-size: 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%; + } +} + +.button:active::after { + bottom: -70%; + background-image: radial-gradient(circle, #415ce4 20%, transparent 20%), + radial-gradient(circle, #415ce4 20%, transparent 20%), + radial-gradient(circle, transparent 10%, #415ce4 15%, transparent 20%), + radial-gradient(circle, #415ce4 20%, transparent 20%), + radial-gradient(circle, #415ce4 20%, transparent 20%), + radial-gradient(circle, #415ce4 20%, transparent 20%), + radial-gradient(circle, #415ce4 20%, transparent 20%); + background-size: 15% 15%, 20% 20%, 18% 18%, 20% 20%, 15% 15%, 20% 20%, 18% 18%; + background-position: 50% 0%; + animation: greenbottomBubbles 1.0s ease; +} + +@keyframes greenbottomBubbles { + 0% { + background-position: 10% -10%, 30% 10%, 55% -10%, 70% -10%, 85% -10%, + 70% -10%, 70% 0%; + } + + 50% { + background-position: 0% 80%, 20% 80%, 45% 60%, 60% 100%, 75% 70%, 95% 60%, + 105% 0%; + } + + 100% { + background-position: 0% 90%, 20% 90%, 45% 70%, 60% 110%, 75% 80%, 95% 70%, + 110% 10%; + background-size: 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%; + } +} + +.winky-rough-700 { + font-family: "Winky Rough", sans-serif; + font-optical-sizing: auto; + font-weight: 700; + font-style: normal; +} \ No newline at end of file diff --git a/buttons/102-button-glowblo/glow-blo.gif b/buttons/102-button-glowblo/glow-blo.gif new file mode 100644 index 0000000..cd744a9 Binary files /dev/null and b/buttons/102-button-glowblo/glow-blo.gif differ diff --git a/buttons/102-button-glowblo/glow-blo.html b/buttons/102-button-glowblo/glow-blo.html new file mode 100644 index 0000000..be6b1df --- /dev/null +++ b/buttons/102-button-glowblo/glow-blo.html @@ -0,0 +1,17 @@ + +
+ + + + + + +