Putting Box Inside Circle in Styled Components

Question

I wanted to follow the picture below where the box is inside a button. How would I do it using styled-components/css

Codesandbox is here CLICK HERE

const ButtonCircle = styled.button`
  background: red;
  height: 60px;
  width: 60px;
  color: white;
  padding: 1rem;
  border: none;
  cursor: pointer;
  font-size: 27px;
  border: 5px solid white;
`;

Answer 1

You can do this with 2 approaches:

• Using custom icons inside
• Using the red cube in the middle

Both examples can be seen in: https://codesandbox.io/s/box-circle-styled-components-forked-50fdi?file=/src/Form.js

Assuming you're using an external element as an icon you are missing:

• Border Radius
• Background transparent
• Padding

So, the final style should be:

const ButtonCircle = styled.button`
  background: transparent;
  height: 60px;
  width: 60px;
  color: white;
  padding: 1rem;
  border: none;
  cursor: pointer;
  font-size: 27px;
  border: 5px solid white;
  border-radius: 50%;
  padding: 10px;
`;

But if you were looking just for that simple button, you can do it ALL with css. In that case, extra to already mentioned, you can include the after modifier. And you will have something like this:

const ButtonCircle2 = styled.button`
  background: transparent;
  height: 60px;
  width: 60px;
  color: white;
  padding: 1rem;
  border: none;
  cursor: pointer;
  font-size: 27px;
  border: 5px solid white;
  border-radius: 50%;
  padding: 10px;

  &:after {
    content: '';
    background: red;
    width: 30px;
    height: 30px;
    display: block;
    border-radius: 4px;  
  }
`;