CSS for Button w/ only CSS

steamnp · Mar 1, 2024 · 1ff9404 · 1ff9404
1 parent f1c9fcd
commit 1ff9404
Show file tree

Hide file tree

Showing 2 changed files with 78 additions and 10 deletions.
diff --git a/src/component/button.css b/src/component/button.css
@@ -34,9 +34,9 @@
 
 .button--view {
   background-color: #d85b53;
-  width: 170px;
+  width: 130px;
   height: 40px;
-  margin-right: 40px;
+  margin-left: 25px;
 }
 
 .button--view:hover {
@@ -45,17 +45,73 @@
 }
 
 /* Assignment */
-/* .button--view--all {
+ .button--view-all {
+  background-color: #548ee6;
+  width: 140px;
+  height: 50px;
+  margin-left: 152px;
+  font-family: 'Courier New', Courier, monospace;
+  font-weight: 900;
+  font-size: 50px;
 }
 
+.button--view-all:hover {
+  width: 291px;
+  box-shadow: 6px 0px 0px rgba(24, 21, 21, 0.2);
+  background-color: rgb(226, 137, 182);
+}
+
+
 .button--remove {
+  background-color: #c5e60b;
+  color: black;
+  width: 150px;
+  height: 60px;
+  margin-left: 291px;
+  font-family:Georgia, 'Times New Roman', Times, serif;
+  font-weight: 900;
+  font-size: 30px;
+}
+
+.button--remove:hover {
+  margin: 0;
+  width: 450px;
+  box-shadow: 6px 0px 0px rgba(248, 70, 70, 0.2);
+  background-color: rgb(255, 8, 0);
+  font-size: 60px;
 }
 
 .button--back {
+  background-color: #e6870b;
+  color: black;
+  width: 110px;
+  height: 70px;
+  margin-left: 441px;
+  font-family:'Courier New', Courier, monospace;
+  font-size: 30px;
+}
+.button--back:hover {
+  cursor: cell;
+  transform: rotate(0.5turn);
 }
 
 .button--get-started {
-}  */
+  background-color: #1de60b;
+  color: black;
+  width: 110px;
+  height: 70px;
+  margin-left: 550px;
+  font-family:Georgia, 'Times New Roman', Times, serif;
+  font-size: 30px;
+}  
+
+.button--get-started:hover {
+  color: white;
+  transform: translateY(-270px); 
+  margin: 0;
+  width: 650px;
+  height: 350px;
+}
 
 /* 0 - 480px */
 /* small screen -> mobile devices */

diff --git a/src/pages/home.jsx b/src/pages/home.jsx
@@ -3,13 +3,25 @@ import Store from './store'
 
 function Home() {
   return (
-    <div>
-      <Button>123456</Button>
-      <Button type="view">123456</Button>
-      {/* <Button type="view-all">New Button</Button>
-      <Button type="back" /> */}
+    <>
+      <Button>123</Button>
+      <div>
+        <Button type="view">456</Button>
+      </div>
+      <div> 
+        <Button type="view-all">789</Button>
+      </div>
+      <div> 
+        <Button type="remove">REMOVE</Button>
+      </div>
+      <div> 
+        <Button type="back">Back</Button>
+      </div>
+      <div> 
+        <Button type="get-started">Start Again</Button>
+      </div>
       {/* <Store /> */}
-    </div>
+    </>
   )
 }