From ee37c3230fed5bdcabb2eb0dcab07fe926e2a4c4 Mon Sep 17 00:00:00 2001
From: Nihaal Sharma <neonsharma@hotmail.com>
Date: Sun, 1 Oct 2023 13:57:41 +0100
Subject: [PATCH] add glow button

---
 index.html |  3 +++
 style.css  | 66 +++++++++++++++++++++++++++++++++++++++++++++++++++++-
 2 files changed, 68 insertions(+), 1 deletion(-)

diff --git a/index.html b/index.html
index 1cfc53c..bad754a 100644
--- a/index.html
+++ b/index.html
@@ -47,6 +47,9 @@
 				
 				To suggest a change or report an error, click Contact in the navbar.<br>
 				If you are suggesting a change, and actually know how to implement it, make a pull request at the correct GitHub repository.<br>
+				
+				<a href="https://neon443.github.io/eaglercraft152/"><button class="glow-on-hover" type="button">Play</button></a>
+				
 		</p><br>
 		<h2>Make a Logo!</h2>
 		<p>
diff --git a/style.css b/style.css
index d6f640c..3a3e55d 100644
--- a/style.css
+++ b/style.css
@@ -4,7 +4,7 @@
 	/* Light */
 		/* Theme: #ddd */
 		/* text: #222 */
-		/* for contrast: #fff */
+		/* for contrast: #aaa */
 		/* transparency: rgba(255, 255, 255, 0.25) */
 		/* box-shadow: 0px 0px 5px 5px rgba(0, 0, 0, 0.25); */
 		/* bar link hover bg color: #111 */
@@ -63,6 +63,7 @@
 
 /* Bar styling*/
 	.bar {
+		z-index: 2;
 		width: 100%;
 		position: fixed;
 		display: flex;
@@ -156,6 +157,69 @@
 		box-shadow: 0px 0px 5px 5px rgba(255, 255, 255, 0.25);
 	}
 }
+
+
+
+
+
+
+
+
+
+.glow-on-hover {
+    width: 220px;
+    height: 50px;
+    border: none;
+    outline: none;
+    color: #fff;
+    background: #222;
+    cursor: pointer;
+    position: relative;
+    z-index: 0;
+    border-radius: 10px;
+}
+
+.glow-on-hover: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% + 4px);
+    height: calc(100% + 4px);
+    animation: glowing 20s linear infinite;
+    opacity: 0;
+    transition: opacity .3s ease-in-out;
+    border-radius: 10px;
+}
+
+.glow-on-hover:hover:before {
+    opacity: 1;
+}
+
+.glow-on-hover:after {
+    z-index: -1;
+    content: '';
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    background: #333;
+    left: 0;
+    top: 0;
+    border-radius: 10px;
+}
+
+@keyframes glowing {
+    0% { background-position: 0 0; }
+    50% { background-position: 400% 0; }
+    100% { background-position: 0 0; }
+}
+
+
+
 @media screen and (max-width: 600px) {
 	
 }
\ No newline at end of file