Using As Prop

1import React from 'react';
2import { styled } from '@filbert-js/core';
3
4const Button = styled('button')`
5 display: inline-block;
6 outline: none;
7 text-decoration: none;
8 font-weight: 300;
9 letter-spacing: 1px;
10 border: 1px solid;
11 transition: all 0.2s ease;
12 box-sizing: border-box;
13 text-shadow: 0 1px 0 rgba(0, 0, 0, 0.01);
14 border-radius: 3px;
15 font-size: 0.8125em;
16 padding: 0.4125em 1.25em;
17 color: #4682b4;
18 border-color: #4682b4;
19 &:hover {
20 background: #4682b4;
21 color: #fff;
22 border-color: #4682b4;
23 }
24`;
25
26render(
27 <Button as="a" target="_blank" rel="noreferrer" href="https://google.com">
28 Visit Google.
29 </Button>,
30);