diff options
Diffstat (limited to 'examples/snowpack/src/components/Button.astro')
| -rw-r--r-- | examples/snowpack/src/components/Button.astro | 56 |
1 files changed, 56 insertions, 0 deletions
diff --git a/examples/snowpack/src/components/Button.astro b/examples/snowpack/src/components/Button.astro new file mode 100644 index 000000000..00e14f01b --- /dev/null +++ b/examples/snowpack/src/components/Button.astro @@ -0,0 +1,56 @@ +--- +export let style; +--- + +<style lang="scss"> +@use '../../public/styles/var' as *; + +.btn { + box-sizing: border-box; + margin-top: 2px; + margin-bottom: 2px; + display: inline-block; + padding: 0.6em 1em 0.4em; + line-height: 1; + font-weight: bold; + font-size: 1.3em; + font-family: inherit; + letter-spacing: -0.025em; + font-family: 'Overpass', sans-serif; + white-space: nowrap; + text-align: center; + text-decoration: none; + vertical-align: middle; + background-color: #fefefe; + border: 1px solid #ccc; + border-radius: 4px; + box-shadow: 0 0px 2px 0 rgba(0, 0, 0, 0); + cursor: pointer; + text-decoration: none; + user-select: none; + transition: transform 100ms cubic-bezier(0.7, 0, 0.84, 0), box-shadow 100ms linear, border-color 40ms linear; + + &:hover, + &:focus { + box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); + border-color: #bbb; + transform: translateY(-1px); + } + + &:focus { + border-color: #00f; + } + + &__primary { + color: #fff; + background: linear-gradient(45deg, $rainbow-green, $rainbow-blue, $rainbow-purple); + border-color: $rainbow-blue; + + &:hover { + border-color: $rainbow-blue; + } + } +} +</style> + +<span class={`btn${style ? ` btn__${style}`: ''}`}><slot /></span> |