Add button-jelly

WidgetA · Apr 27, 2019 · ce9a62f · ce9a62f
1 parent cb6edac
commit ce9a62f
Showing 1 changed file with 37 additions and 0 deletions.
diff --git a/effects/button-jelly.vue b/effects/button-jelly.vue
@@ -0,0 +1,37 @@
+<template>
+<button>Button</button>
+</template>
+
+<style scoped>
+button {
+  z-index: 1;
+  font-size: inherit;
+  font-family: inherit;
+  color: white;
+  padding: 0.5em 1em;
+  outline: none;
+  border: none;
+  background-color: hsl(246, 45%, 15%);
+}
+
+button:hover {
+  cursor: pointer;
+  animation: jelly 0.5s;
+}
+
+@keyframes jelly {
+  0%,
+  100% {
+    transform: scale(1, 1);
+  }
+  25% {
+    transform: scale(0.9, 1.1);
+  }
+  50% {
+    transform: scale(1.1, 0.9);
+  }
+  75% {
+    transform: scale(0.95, 1.05);
+  }
+}
+</style>