diff options
Diffstat (limited to 'examples/ssr/src/components/AddToCart.svelte')
-rw-r--r-- | examples/ssr/src/components/AddToCart.svelte | 47 |
1 files changed, 47 insertions, 0 deletions
diff --git a/examples/ssr/src/components/AddToCart.svelte b/examples/ssr/src/components/AddToCart.svelte new file mode 100644 index 000000000..b03b8180a --- /dev/null +++ b/examples/ssr/src/components/AddToCart.svelte @@ -0,0 +1,47 @@ +<script> + export let id = 0; + + function addToCart() { + window.dispatchEvent(new CustomEvent('add-to-cart', { + detail: id + })); + } +</script> +<style> + button { + display:block; + padding:0.5em 1em 0.5em 1em; + border-radius:100px; + border:none; + font-size: 1.4em; + position:relative; + background:#0652DD; + cursor:pointer; + height:2em; + width:10em; + overflow:hidden; + transition:transform 0.1s; + z-index:1; +} +button:hover { + transform:scale(1.1); +} + +.pretext { + color:#fff; + background:#0652DD; + position:absolute; + top:0; + left:0; + height:100%; + width:100%; + display:flex; + justify-content:center; + align-items:center; + font-family: 'Quicksand', sans-serif; + text-transform: uppercase; +} +</style> +<button on:click={addToCart}> + <span class="pretext">Add to cart</span> +</button> |