edit css button

diegoivg98 · Dec 19, 2022 · a3fcbad · a3fcbad
1 parent 9ffcc71
commit a3fcbad
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 1 deletion.
diff --git a/src/App.css b/src/App.css
@@ -19,3 +19,42 @@ h1 {
   max-width: 80%;
   min-height: 80%;
 }
+
+button {
+  padding: 15px 25px;
+  border: unset;
+  border-radius: 15px;
+  color: #212121;
+  z-index: 1;
+  background: #e8e8e8;
+  position: relative;
+  font-weight: 1000;
+  font-size: 17px;
+  -webkit-box-shadow: 4px 8px 19px -3px rgba(0,0,0,0.27);
+  box-shadow: 4px 8px 19px -3px rgba(0,0,0,0.27);
+  transition: all 250ms;
+  overflow: hidden;
+ }
+
+ button::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 100%;
+  width: 0;
+  border-radius: 15px;
+  background-color: #212121;
+  z-index: -1;
+  -webkit-box-shadow: 4px 8px 19px -3px rgba(0,0,0,0.27);
+  box-shadow: 4px 8px 19px -3px rgba(0,0,0,0.27);
+  transition: all 250ms
+ }
+
+ button:hover {
+  color: #e8e8e8;
+ }
+
+ button:hover::before {
+  width: 100%;
+ }
diff --git a/src/App.jsx b/src/App.jsx
@@ -49,7 +49,7 @@ function App() {
       </div>
       <button
         type="button"
-        className="btn btn-outline-success d-flex m-auto mt-sm-3"
+        className="d-flex m-auto mt-sm-3"
         onClick={handleSubmit}
       >
         Convertir