final form

_sass/isotope.scss

@@ -3,13 +3,14 @@
 /* ---- button ---- */
 
 .button {
+  
   display: inline-block;
   padding: 10px 18px;
-  margin-bottom: 10px;
-  background: #EEE;
+  margin: 0 10px 10px 0;
+  background: rgba(65, 106, 0, 0.473);
   border: none;
-  border-radius: 3px;
-  color: #222;
+  border-radius: 300px;
+
   font-size: 16px;
   text-shadow: 0 1px white;
   transition: all .2s ease;
@@ -23,7 +24,12 @@
 
 .button:active,
 .button.is-checked {
-  background-color: #28F;
+  background: linear-gradient(230deg, rgba(255, 0, 255, 0.902), rgba(66, 107, 0, 0.902));
+  background-size: 1000% 1000%;
+  
+  -webkit-animation: AnimationName 30s ease infinite;
+  -moz-animation: AnimationName 30s ease infinite;
+  animation: AnimationName 30s ease infinite;
 }
 
 .button.is-checked {
@@ -37,16 +43,21 @@
 
 /* ---- button-group ---- */
 
-
-
-.button-group .button:first-child {
-  border-radius: 0.5em 0 0 0.5em;
-}
-
-.button-group .button:last-child {
-  border-radius: 0 0.5em 0.5em 0;
+.button-group{
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
 }
 
 
+// .button-group .button:first-child {
+//   border-radius: 0.5em 0 0 0.5em;
+// }
+
+// .button-group .button:last-child {
+//   border-radius: 0 0.5em 0.5em 0;
+// }
+
+
 
 

_sass/main.scss

@@ -151,11 +151,9 @@ a:hover {
 .musiflex {
   display: flex;
   flex-wrap: wrap;
+  justify-content: center;
   margin: 0;
   padding: 0;
-
-
-
   background-repeat: repeat;
 }
 .trackcontainer {
@@ -292,6 +290,7 @@ min-height: 80vh;
   margin-bottom: auto;
 }
 #navigation {
+  z-index: 10000;
   position: fixed;
   bottom: 10px;
   right: 10px;