reactjsph-website/src/components/circleButton.js at 8e0c03000b04a152397d074a63234d4be7d5adf4 · reactph/reactjsph-website · GitHub

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
import React from "react"

import { Flex, Text } from "theme-ui"

const CircleButton = ({ children, ...props }) => (
  <Flex
    role="button"
    tabIndex="0"
    justifyContent="center"
    alignItems="center"
    width="3rem"
    height="3rem"
    backgroundColor="rgba(255, 255, 255, 0.25)"
    sx={{
      position: "relative",
      zIndex: 1,
      borderRadius: "50%",
      outline: "none",
      userSelect: "none",
      cursor: "pointer",
      "&::before": {
        position: "absolute",
        top: 0,
        left: 0,
        width: "100%",
        height: "100%",
        boxShadow: "0 0 24px rgba(123, 213, 245, 0.75)",
        opacity: 0,
        borderRadius: "50%",
        transition: "200ms opacity",
        content: "''",
      },
      "&:hover, &:focus": {
        "&::before": {
          opacity: 1,
        },
      },
    }}
    {...props}
  >
    <Text color="white" fontSize="5" mb="1" sx={{ position: "relative" }}>
      {children}
    </Text>
  </Flex>
)

export default CircleButton