boredbutton3

commit fb198d6d2c22581960e98f9c8c45606df50e01cb
parent 22e8c62d8931a80b3c18ba1dedc404bdc0468f11
Author: Francisco Boudagh <franciscoboudagh1@gmail.com>
Date:   Sun, 19 Dec 2021 21:36:33 +0100


Diffstat:
M
index.html
 | 
5
++++-
M
script.js
 | 
2
+-
M
style.css
 | 
88
++++++++++++++++++++++++++++++++++++++++++++-----------------------------------

3 files changed, 54 insertions(+), 41 deletions(-)
diff --git a/index.html b/index.html
@@ -20,7 +20,10 @@
     		<p class="headline">BOREDBUTTON<sup>3</p>
     </div>
 
-    <div class="main" id="main" onclick="showFact()"></div>
+    <div class="main" id="main">
+      <button onclick="showFact()" id="button" type="button"></button>
+    </div>
+    
     <p id="fact_text"></p>
 
   </body>
diff --git a/script.js b/script.js
@@ -10,7 +10,7 @@ function showFact() {
 }
 
 function moveButton() {
-    document.getElementById("main").style.bottom = "35%";
+    document.getElementById("button").style.bottom = "35%";
     document.getElementById("fact_text").style.display = "inline";
     document.getElementById("fact_text").style.opacity = "100%";
 }
diff --git a/style.css b/style.css
@@ -47,7 +47,7 @@ canvas{
 /* Fakta */
 #fact_text {
     margin: auto;
-    position: fixed;
+    position: absolute;
     top: 0;
     bottom: 0;
     left: 0;
@@ -55,14 +55,13 @@ canvas{
     width: 70%;
     height: fit-content;
     text-align: center;
-    margin-top: 28%;
+    margin-top: 57vh;
     display: none;
     opacity: 0;
     animation: appear 2s linear;
-    opacity: 0;
     font-size: 1.8em;
     font-family: krublight;
-    z-index: 1;
+    z-index: 10;
 }
 
 @keyframes appear {
@@ -70,10 +69,24 @@ canvas{
   100% { opacity: 1; }
 }
 
+/* Footer */
+footer{
+	color: #3F617C;
+	text-align: center;
+	margin-bottom: 1%;
+	font-size: 1em;
+	position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+	width: 100%;
+	font-family: krublight;
+}
+
 /* Knappen */
-.main{
-  width: 180px;
-  height: 180px;
+#button {
+  width: 15vh;
+  height: 15vh;
   border: 2px solid #3F617C;
   background-color: #3F617C;
   opacity: 0.75;
@@ -84,33 +97,44 @@ canvas{
   transition: 0.7s;
   z-index: 2;
 }
-.main:before {
+
+#button:before {
   content: '';
   background: linear-gradient(45deg, #ff0000, #ff7300, #fffb00, #48ff00, #00ffd5, #002bff, #7a00ff, #ff00c8, #ff0000);
   position: absolute;
-  background-size: 400%;
+  top: -3px;
+  left:-3px;
+  background-size: 500%;
   z-index: -1;
-  filter: blur(5px);
-  width: calc(100% + 4px);
-  height: calc(100% + 4px);
+  filter: blur(6px);
+  width: calc(100% + 5px);
+  height: calc(100% + 5px);
   animation: glowing 20s linear infinite;
-  opacity: 0;
   transition: opacity .3s ease-in-out;
   border-radius: 50%;
 }
 
-.main:hover{
-opacity: 1;
-border-radius: 50%;
-cursor: pointer;
+#button:active{
+  background: transparent;
 }
 
-.main:hover:before {
+#button:active:after {
+  background: #3F617C;
   opacity: 1;
-  border-radius: 50%;
+  
 }
 
-.main:after {
+#button:hover {
+  opacity: 0.95;
+  
+}
+
+#button:hover:before {
+  opacity: 0.95;
+  
+}
+
+#button:after {
   z-index: -1;
   content: '';
   position: absolute;
@@ -132,29 +156,15 @@ cursor: pointer;
 @media only screen 
   and (max-width: 1300px) { 
     .headline {
-      font-size: 1.3em;
+      font-size: 1.5em;
       margin-top: 3%;
     }
-    .main{
-      width: 90px;
-      height: 90px;
+    #button{
+      width: 15vh;
+      height: 15vh;
     }
     #fact_text{
       font-size: 1em;
-      position: relative;
+      margin-top: 57vh;
     }
-}
-
-/* Footer */
-footer{
-	color: #3F617C;
-	text-align: center;
-	margin-bottom: 1%;
-	font-size: 1em;
-	position: fixed;
-  bottom: 0;
-  left: 0;
-  right: 0;
-	width: 100%;
-	font-family: krublight;
 }
 \ No newline at end of file