Stylizacja przycisków

src/App.vue

@@ -125,6 +125,27 @@ input {
   box-sizing: border-box;
 }
 
+button {
+  display: flex;
+  align-items: center;
+
+  background: #333;
+  border: none;
+
+  color: #e0e0e0;
+  font-size: 0.9em;
+
+  outline: none;
+  padding: 0.5em;
+  cursor: pointer;
+
+  transition: all 0.3s;
+
+  &:hover {
+    background: rgba(#e0e0e0, 0.4);
+  }
+}
+
 a {
   color: white;
   text-decoration: none;

src/components/ui/Options.vue

@@ -57,21 +57,8 @@ export default Vue.extend({
 }
 
 button {
-  color: #e0e0e0;
   font-size: 0.8em;
-
-  display: flex;
-  align-items: center;
-
-  background: #333;
-  border: none;
-
-  outline: none;
-  padding: 0.2em;
-
-  cursor: pointer;
-
-  transition: all 0.3s;
+  padding: 0.3em;
 
   img {
     width: 1.3em;
@@ -83,10 +70,5 @@ button {
     border: none;
     font-weight: bold;
   }
-
-  &:hover,
-  &:focus {
-    background: rgba(#e0e0e0, 0.1);
-  }
 }
 </style>