added button styling

src/features/timbre/Timbre.module.css

@@ -8,3 +8,31 @@
 .lineBreak {
     width: 100%;
 }
+
+.buttonContainer {
+    position: fixed;
+    top: 0;
+    left: 25%;
+}
+
+.buttonContainer > button {
+    background: white;
+    color: slategrey;
+    font-size: 1em;
+    margin: 0.75em 1em;
+    padding: 0.25em 1em;
+    border: 2px solid slategrey;
+    border-radius: 3px;
+    outline: none;
+}
+
+.buttonContainer > button:hover {
+    background: white;
+    color: slateblue;
+    border: 2px solid slateblue;
+}
+.buttonContainer > button:focus {
+    background: slateblue;
+    color: white;
+    border: 2px solid slateblue;
+}

src/features/timbre/timbreSwitcher.js

@@ -3,6 +3,7 @@ import Timbre from './Timbre';
 import Vocoder from './Vocoder';
 import { useDispatch, useSelector } from 'react-redux';
 import { timbreCurrentUpdate } from './timbreSlice';
+import styles from './Timbre.module.css';
 
 export default function TimbreSwitcher(props) {
     const currentTimbre = useSelector((state) => state.timbres.currentTimbre);
@@ -15,8 +16,8 @@ export default function TimbreSwitcher(props) {
 
     return (
         <div>
-            <div>
-                <button onClick={(e) => handleClick(e, 'timbre1')}>
+            <div className={styles.buttonContainer}>
+                <button autoFocus onClick={(e) => handleClick(e, 'timbre1')}>
                     set to timbre 1
                 </button>
                 <button onClick={(e) => handleClick(e, 'timbre2')}>