Better brighter buttons

src/App.vue

@@ -203,7 +203,6 @@
             <el-button
               icon="el-icon-medal-1"
               type="success"
-              round
               @click="thanks"
             >
               Donate
@@ -216,9 +215,7 @@
           >
             <el-button
               icon="el-icon-download"
-              plain
               type="info"
-              round
             >
               Download
             </el-button>

src/components/Header.vue

@@ -49,9 +49,6 @@
             v-scroll-to="'#download'"
           >
             <el-button
-              round
-              plain
-              type="info"
               icon="el-icon-download"
             >
               Download
@@ -62,9 +59,6 @@
             @click="showSharing = !showSharing"
           >
             <el-button
-              round
-              plain
-              type="info"
               icon="el-icon-share"
             >
               Share

src/components/NavBar.vue

@@ -170,6 +170,7 @@ export default {
       }
 
       const root = document.documentElement
+      root.dataset.theme = this.theme
       root.style.setProperty('--background-color-base', this.backgroundColour)
       root.style.setProperty('--background-color-alternate', this.alternateBackgroundColour)
       root.style.setProperty('--color-text-primary', this.textColour)

src/main.js

@@ -1,7 +1,7 @@
+import './plugins/element.js'
 import Vue from 'vue'
 import App from './App.vue'
 import VueScrollTo from 'vue-scrollTo'
-import './plugins/element.js'
 import VueCodemirror from 'vue-codemirror'
 import 'codemirror/lib/codemirror.css'
 import SocialSharing from 'vue-social-sharing'

src/styles/globals.scss

@@ -26,6 +26,9 @@
   --color-text-accented: #0bf;
 }
 
+$background-dark: #595959;
+$background-light: #fff;
+
 html,
 * {
   font-family: 'VictorMono', monospace;
@@ -69,6 +72,44 @@ p {
 
 .el-button {
   font-size: 1.1em;
+  color: var(--text-color);
+  background: rgba($background-dark, 0.25);
+  border-color: var(--text-color);
+  border-width: 2px;
+  transition-duration: 1s;
+  &.el-button--success {
+    border-color: rgba(50,255,50,1);
+  }
+  &:hover {
+    color: var(--text-color);
+    background: rgba($background-dark, 1);
+    border-color: var(--text-color);
+    border-radius: 32px;
+    box-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
+    transition: all 0.25s;
+    transform: scale(1.1);
+    &.el-button--success {
+      background: linear-gradient(to bottom right, rgba(0,170,0,1), rgba(0,160,207,1));
+      border-color: var(--text-color);
+    }
+  }
+}
+
+[data-theme=light] {
+  .el-button {
+    background: rgba($background-light, 0.25);
+    &.el-button--success {
+      border-color: rgba(0,170,0,1);
+    }
+    &:hover {
+      background: rgba($background-light, 1);
+      box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
+      &.el-button--success {
+        background: linear-gradient(to bottom right, rgba(50,255,50,1), rgba(50,225,255,1));
+        border-color: var(--text-color);
+      }
+    }
+  }
 }
 
 .alternate-bg {