Putting Box Inside Circle in Styled Components

user_16575867 0
Viewed 320

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

enter image description here

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;
`;
styled-components reactjs css
1 Answers

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;  
  }
`;
user_41511370
Related