Fixed click effect

kyok01 · Mar 16, 2022 · 0ce1c6f · 0ce1c6f
1 parent 7130d3d
commit 0ce1c6f
Show file tree

Hide file tree

Showing 2 changed files with 59 additions and 11 deletions.
diff --git a/src/components/App.css b/src/components/App.css
@@ -24,16 +24,6 @@
   font-size: 2rem;
 }
 
-[type="submit"] {
-  padding: 0.5rem;
-  font-size: large;
-  background-color: blueviolet;
-  margin-left: 1rem;
-  border: 2px solid transparent;
-  border-radius: 0.5rem;
-  color: white;
-}
-
 [type="file"] {
   padding: 0.3rem 1rem;
   border: 2px solid blueviolet;
@@ -57,3 +47,61 @@ img {
   margin: 0rem auto;
 }
 
+.button{
+  position: relative;
+  background-color: black;
+  border-radius: 4em;
+  font-size: 16px;
+  color: white;
+  padding: 0.8em 1.8em;
+  cursor:pointer;
+  user-select:none;
+  text-align: center;
+  text-decoration: none;
+  cursor: pointer;
+  transition-duration: 0.4s;
+  -webkit-transition-duration: 0.4s; /* Safari */
+}
+
+.button:hover {
+  transition-duration: 0.1s;
+  background-color: #3A3A3A;
+}
+
+.button:after {
+  content: "";
+  display: block;
+  position: absolute;
+  border-radius: 4em;
+  left: 0;
+  top:0;
+  width: 100%;
+  height: 100%;
+  opacity: 0;
+  transition: all 0.5s;
+  box-shadow: 0 0 10px 40px white;
+}
+
+.button:active:after {
+  box-shadow: 0 0 0 0 white;
+  position: absolute;
+  border-radius: 4em;
+  left: 0;
+  top:0;
+  opacity: 1;
+  transition: 0s;
+}
+
+.button:active {
+  top: 1px;
+}
+
+[type="submit"] {
+  padding: 0.5rem;
+  font-size: large;
+  background-color: blueviolet;
+  margin-left: 1rem;
+  border: 2px solid transparent;
+  border-radius: 0.5rem;
+  color: white;
+}
diff --git a/src/components/App.js b/src/components/App.js
@@ -39,7 +39,7 @@ const App = () => {
       <div className="main">
         <form onSubmit={handleSubmit}>
           <input type="file" onChange={retrieveFile} />
-          <button type="submit">Submit</button>
+          <button type="submit" className="button">Submit</button>
         </form>
       </div>