diff --git a/deepayanpal09/fancybutton.css b/deepayanpal09/fancybutton.css new file mode 100644 index 0000000..7c86442 --- /dev/null +++ b/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; +}