All files / Rindu/components/Button Button.tsx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
 
 
 
 
 
 
 
6x
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
import {
  ButtonHTMLAttributes,
  DetailedHTMLProps,
  PropsWithChildren,
  ReactElement,
} from "react";
 
export default function Buttton({
  children,
  ...props
}: PropsWithChildren<
  DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>
>): ReactElement {
  return (
    <button {...props}>
      {children}
      <style jsx>{`
        button {
          border-radius: 500px;
          text-decoration: none;
          color: #000;
          cursor: pointer;
          display: inline-block;
          font-family: Lato, sans-serif;
          font-size: 13px;
          font-weight: 600;
          letter-spacing: 0.3px;
          line-height: 18px;
          padding: 4px 16px;
          text-align: center;
          transition: all 33ms cubic-bezier(0.3, 0, 0, 1);
          white-space: nowrap;
          background-color: #1ed760;
          border: 1px solid #1db954b3;
          will-change: transform;
          word-spacing: 3px;
          min-block-size: 32px;
        }
        button:focus,
        button:hover {
          background-color: #1fdf64;
          transform: scale(1.04);
        }
        button:active {
          transform: scale(1);
        }
      `}</style>
    </button>
  );
}