widget-code.tsx

import { } from 'react';
import { Link } from 'vev';

export default function({ link, linkText }: Props) {
  return (
    <Link to={link} className="fill">{linkText || 'Open link'}</Link>
  );
}

widget-form.tsx

<div>
  <LinkField name="link" default="" />
  <TextField name="linkText" default="Open Link" />
</div>

widget-style.scss

:host{
  
}
a {
  display: vev(flex);
  flex-direction: vev(row);
  align-items: vev(center);
  justify-content: vev(center);
  text-decoration: none;
  color: vev($bg3);
  background: vev($primary4);
  border: vev(1px solid $primary4);
  border-radius: vev(25px);
  transition: all 2s cubic-bezier(0.075, 0.82, 0.165, 1);
  font-family: vev();
  font-size: vev(18px);
  font-weight: vev(normal);
  line-height: vev();
  letter-spacing: vev();
  word-spacing: vev();
  text-transform: vev();
  box-shadow: vev();
  text-shadow: vev();
}
a:hover {
  font-size: vev(18px);
  font-weight: vev(normal);
  line-height: vev();
  letter-spacing: vev();
  word-spacing: vev();
  text-transform: vev();
  text-decoration: none;
  color: vev($bg4);
  background: vev($primary3);
  border: vev(1px solid $primary3);
  cursor: pointer;
  box-shadow: vev();
  text-shadow: vev();
}