diff options
Diffstat (limited to 'examples/portfolio/src/components/CallToAction.astro')
| -rw-r--r-- | examples/portfolio/src/components/CallToAction.astro | 56 |
1 files changed, 56 insertions, 0 deletions
diff --git a/examples/portfolio/src/components/CallToAction.astro b/examples/portfolio/src/components/CallToAction.astro new file mode 100644 index 000000000..a1ca69750 --- /dev/null +++ b/examples/portfolio/src/components/CallToAction.astro @@ -0,0 +1,56 @@ +--- +interface Props { + href: string; +} + +const { href } = Astro.props; +--- + +<a href={href}><slot /></a> + +<style> + a { + position: relative; + display: flex; + place-content: center; + text-align: center; + padding: 0.56em 2em; + gap: 0.8em; + color: var(--accent-text-over); + text-decoration: none; + line-height: 1.1; + border-radius: 999rem; + overflow: hidden; + background: var(--gradient-accent-orange); + box-shadow: var(--shadow-md); + white-space: nowrap; + } + + @media (min-width: 20em) { + a { + font-size: var(--text-lg); + } + } + + /* Overlay for hover effects. */ + a::after { + content: ''; + position: absolute; + inset: 0; + pointer-events: none; + transition: background-color var(--theme-transition); + mix-blend-mode: overlay; + } + + a:focus::after, + a:hover::after { + background-color: hsla(var(--gray-999-basis), 0.3); + } + + @media (min-width: 50em) { + a { + padding: 1.125rem 2.5rem; + font-size: var(--text-xl); + } + } +</style> |