How to use the preact-emotion.button function in preact-emotion

/* checked mark aspect changes */
  [type='checkbox']:checked + label:after {
    border-color: var(--border-color);
  }

  [type='checkbox']:focus + label:before {
    outline: #52796f auto 5px;
  }

  /* hover style just for information */
  label:hover:before {
    background: var(--dialog-background);
  }
`

const Button = styled.button`
  display: inline-block;
  height: 2em;
  line-height: 2em;
  background: transparent;
  color: var(--font-color);
  font-size: var(--font-size);
  border: 1px solid var(--border-color);

  &:active {
    background: var(--dialog-background);
  }

  &:focus {
    outline: #52796f auto 5px;
  }
`

margin-top: 1em;
  }
`;

export const Textarea = styled.textarea`
  appearance: none;
  font: inherit;

  resize: none;
  border: 1px solid #777;
  width: 100%;
  font-size: 1em;
  padding: 0.8rem 1em;
`;

export const Button = styled.button`
  appearance: none;
  border: 0;
  background: #333;
  color: #fff;
  padding: 0.8em 1em;
  font: inherit;
`;

export const Form = styled.form`
  display: flex;
  align-items: flex-end;
  justify-content: center;
  flex-direction: column;
`;

export const List = styled.ul`

@media all and (max-width: 500px) {
        height: 300px;
        position: relative;
    }
`;

const Compiled = styled.div`
    ${sharedCss};
    padding-left: 2rem;
    padding-right: 1rem;
    overflow: auto;
    overflow-x: hidden;
`;

const ShinyButton = styled.button`
    background: #444;
    color: #DDD;
    cursor: pointer;
    font: inherit;
    transition: background 200ms ease;

    &:hover,
    &:focus {
        background: #222;
    }

    &:active {
        background: #000;
    }
`;