---
const { url, name, filetype = ".gif" } = Astro.props;
---

<a href={url}>
  <picture>
    <source
      srcset={`/img/sitebuttons/${name}.png`}
      media="(prefers-reduced-motion: reduce)"
    />
    <img srcset={`/img/sitebuttons/${name}${filetype}`} alt={name} />
  </picture>
</a>

<style>
  a {
    display: inline-block;
    margin-bottom: 6px;
  }
</style>