cssZa

cssZa

src/components/Homepage.js

@@ -51,6 +51,7 @@ export default function Homepage() {
 {!showHangman && (
             <div
             style={{
+              padding: 30,
               marginTop: 30 ,
               display: 'flex' ,
               gap: 50,
@@ -64,19 +65,19 @@ export default function Homepage() {
               id='Easy'
               className="Hangman-reset mx-2 animated-button"
               onClick={() => selectCat('Animal')}>
-              Animal
+              Animal🐻
             </button>
             <button
               id='Medium'
-              className="Hangman-reset mx-2 animated-button"
+              className="Hangman-reset2 mx-2 animated-button"
               onClick={() => selectCat('Programming')}>
-              Program Lang
+              Computer Lang👨🏿‍💻
             </button>
             <button
               id='Hard'
               className="Hangman-reset mx-2 animated-button"
               onClick={() => selectCat('Country')}>
-              Country
+              Country🌎
             </button>
             </>
 

src/index.css

@@ -22,6 +22,10 @@ body {
   height: 350px;
 }
 
+.text-primary h3{
+  color: var(--level-color);
+}
+
 .Hangman h1 {
   font-size: 3rem;
   font-weight: 400;
@@ -67,6 +71,28 @@ body {
   box-shadow: 0 0 40px var(--main-color);
   z-index: 3;
 }
+
+.Hangman-reset2 {
+  color: var(--hash-color); 
+  box-shadow: 0 5px var(--main-color) !important;
+  width: 17.5rem !important;
+  background-color: var(--main-color) ; 
+  border-color: var(--main-color);
+  box-shadow: 0 0 40px var(--main-color);
+  z-index: 3;
+}
+
+.Hangman-reset3 {
+  color: var(--hash-color);
+  box-shadow: 0 5px var(--main-color) !important;
+  width: 10rem !important;
+  background-color: var(--main-color);
+  border-color: var(--main-color);
+  box-shadow: 0 0 40px var(--main-color);
+  z-index: 3;
+}
+
+
 .Hangman-reset.clicked {
   transition: translateY(10px);
   transform: translateY(10px);