Create a perfect circle with CSS

Question

How about friends, I'm new to the topic of CSS. I am trying to perform to pulse effect as you can see in this image.

I would like my menu icon (icon next to word "Home") to have a similar animation.

My problem is that I do not know how to achieve a perfect circle where to achieve this animation. This is my current result:

What I can do?

this is my code:

https://multi-level-side-menu-4bj1tj.stackblitz.io

ion-header button[ion-button].bar-buttons {
  border-radius: 10px;
  background: transparent;
  box-shadow: 0 0 0 0 rgba(90, 153, 212, 0.5);
  animation: pulse 1.5s infinite;
}
ion-header button[ion-button].bar-buttons:hover {
  animation: none;
}

@keyframes pulse {
  0% {
  transform: scale(0.9);
  }
  70% {
    transform: scale(1);
    box-shadow: 0 1 0 10px rgba(90, 153, 212, 0);
  }
    100% {
    transform: scale(0.9);
    box-shadow: 0 0 0 0 rgba(90, 153, 212, 0);
  }
}

I share the source code that I am doing, if you want to edit something, you must modify the app/app.css file, to see in real time.

thank you!

I'm not much into the css world, but what you are looking for I believe is the material design "ripple" effect, check out [this link](https://medium.com/@jh3y/how-to-create-the-ripple-effect-from-google-material-design-c6f993e1d39). I post it as a comment because I believe I will get down-voted as hell for just posting a link. Hope it helps! — Alvaro Castro, Aug 15 '18 at 03:20
Also, post your code here (real code, no screeshots), because that will net you lots of down-votes from too. — Alvaro Castro, Aug 15 '18 at 03:23
give a height that is same as width and then give `border-radius:50%`, and voila, the issue will be solved. — Code_Ninja, Aug 15 '18 at 03:43
can you share your html too then, I will try and provide you a solution. — Code_Ninja, Aug 15 '18 at 03:57
@Code_Ninja thanks... https://multi-level-side-menu-4bj1tj.stackblitz.io — yavg, Aug 15 '18 at 04:18
@yavg my solution totally works. I checked it on the sample code you provided. Input the values and you will see. — Animan, Aug 15 '18 at 04:49

score 7 · Accepted Answer · answered Aug 15 '18 at 03:39

7

In order to achieve a perfectly round shape you'll need to have perfect square to begin with. So, for instance, your button will need to have dimensions like width: 32px; height: 32px. To turn a square into a circle you'll have to apply a border radius of 50% e.g. border-radius: 50%.

answered Aug 15 '18 at 03:39

FranCarstens

1,203
8
13

thanks, I tried to do what you say, I do not know if I missed something or I'm doing something wrong .. https://stackblitz.com/edit/multi-level-side-menu-tbgi9b?file=app/app.css – yavg Aug 15 '18 at 03:42
That's because the content of your button is larger than 32px, and it's pushing the button's dimensions past 32px x 32px, breaking the aspect ratio. For example, at 48px x 48px it looks about right, but it may be too big for your liking. Alternatively you could change the hamburger icon to something with smaller dimensions, make it smaller or experiment with `overflow:hidden` on the button. – FranCarstens Aug 15 '18 at 03:48
I do not know how to fix it, but I'll keep trying – yavg Aug 15 '18 at 03:56
If you update your style here that should work: ion-header button[ion-button].bar-buttons { width: 48px; height: 48px; border-radius: 50%; background: #5a99d4; box-shadow: 0 0 0 0 rgba(90, 153, 212, 0.5); animation: pulse 1.5s infinite; } – FranCarstens Aug 15 '18 at 03:58

Pixelomo · Answer 2 · 2022-01-28T01:29:33.227

To create a perfect circle you need equal width and height as well as border-radius of 50%

width: 50px;
height: 50px;
border-radius: 50%;

The animation you reference is part of Google's Material Design, this is a very sophisticated CSS animation. It is possible to recreate it from scratch but that will take time.

The core of what you need is the circle to grow in size and a box-shadow to pulse out.

I've created a simplified version here

https://codepen.io/suth_a/pen/NBVNXE?editors=1100

you create animations by defining them with @keyframes name

@keyframes pulse{
  100%{
    box-shadow: 0 0 20px 3px #5a99d4;
    transform: scale(1.2);
  }
}

on hovering the animation is initiated

div:hover{
    animation: pulse 1s ease-in-out infinite alternate;
}

pulse - is the name of the animation I created

1s - is the length of the animation ease-in-out - is the easing function - https://css-tricks.com/ease-out-in-ease-in-out

infinite - tells the browser to repeat the animation indefinitely

alternate - tells the browser that at the end of each animation it should begin from the ending and work back to the beginning, that way the animation looks smooth.

You can take my animation and work on it until you get something closer to what you want but if you're really set on that exact animation then add material design to your project and you can create buttons like this in no time

https://materializecss.com/getting-started.html

<a class="btn-floating pulse"><i class="material-icons">menu</i></a>

https://materializecss.com/pulse.html

Animan · Answer 3 · 2018-08-15T04:50:59.030

1

Add the following css properties to the pulse icon (circle).

height:40px; width:40px; border-radius:50%

If the height and width don't suit your needs then you can increase them proportionally so that they are always equal to each other.

edited Aug 15 '18 at 04:50

answered Aug 15 '18 at 04:18

Animan

312
1
10

it not works for me :( – yavg Aug 15 '18 at 04:19
did u try it out? – Animan Aug 15 '18 at 04:19
It works perfectly! i just checked it on your code! – Animan Aug 15 '18 at 04:23

Create a perfect circle with CSS

3 Answers3