diff --git a/css/main.css b/css/main.css
index bb20ce7..81218fe 100755
--- a/css/main.css
+++ b/css/main.css
@@ -3,26 +3,46 @@
/* ==========================================================================
Author's custom styles
========================================================================== */
+html,
+body {
+ height: 100%;
+ margin: 0;
+}
+.buttoncontainer {
+ height: 100%;
+ display: flex;
+ display: -webkit-flex;
+ flex-direction: row;
+ -webkit-flex-direction: row;
+ -webkit-align-content: stretch;
+ align-content: stretch;
+}
-.fillthevoid {
- height: 200px;
- width: 100%;
+.thebutton {
+ background-color: red;
+ -webkit-flex: 1;
+ flex: 1;
+ position: relative;
font-family: Lato;
font-weight: 800;
font-size: 30px;
color: white;
background-color: red;
border:none;
+ text-transform:uppercase;
}
.voidfilled {
+ -webkit-flex: 1;
+ flex: 1;
+ position: relative;
background: linear-gradient(270deg, #674500, #ffecc7);
background-size: 400% 400%;
-webkit-animation: BrownTown 5s ease infinite;
-moz-animation: BrownTown 5s ease infinite;
animation: BrownTown 5s ease infinite;
- height: 200px;
+ height: 100%;
width: 100%;
color: white;
}
@@ -61,4 +81,4 @@
100% {
background-position: 0% 50%
}
-}
\ No newline at end of file
+}
diff --git a/index.html b/index.html
index a3c175a..2a40987 100755
--- a/index.html
+++ b/index.html
@@ -6,7 +6,7 @@
-
+ Button
@@ -27,7 +27,9 @@
-
+
+
+
diff --git a/js/main.js b/js/main.js
index b504467..d7ffe45 100755
--- a/js/main.js
+++ b/js/main.js
@@ -1,12 +1,12 @@
$(document).ready(function() {
- $(".fillthevoid").click(function() {
+ $(".thebutton").click(function() {
$(this).toggleClass("voidfilled");
});
});
-$(".fillthevoid").on("click", function() {
+$(".thebutton").on("click", function() {
var el = $(this);
el.text() == el.data("text-swap") ?
el.text(el.data("text-original")) :
el.text(el.data("text-swap"));
-});
+});
\ No newline at end of file