fancybutton.css

deepayanpal09/fancybutton.css

@@ -0,0 +1,38 @@
+  border: 0;
+  outline: 0;
+  padding: 0;
+  margin: 0;
+  position: relative;
+  border-radius: 0.9em;
+  box-shadow: 0 0.6em 0.9em rgba(0, 0, 0, 0.6);
+  user-select: none; /* Thanks to @SplittyDev */
+  transform: translateY(-0.5em);
+  transition:
+    background-color 300ms cubic-bezier(0.18, 0.89, 0.32, 1.28),
+    box-shadow 300ms cubic-bezier(0.18, 0.89, 0.32, 1.28),
+    transform 300ms cubic-bezier(0.18, 0.89, 0.32, 1.28);
+}
+
+.btn-splatter:focus {
+  outline: 0;
+}
+
+.btn-splatter:active {
+  background-color: #2770df;
+  box-shadow: 0 0 0 rgba(0, 0, 0, 0.5);
+  transform: translateY(0em) scale(0.9);
+  transition:
+    background-color 150ms ease-out,
+    box-shadow 150ms ease-out,
+    transform 150ms ease-out;
+}
+
+.splatter {
+  position: absolute;
+  top: 0;
+  left: 0;
+}
+
+.splatter-round, .splatter-ring, .splatter-star {
+  position: absolute;
+}