Подскажите как сделать подобные эффекты?

[viliksar]

Пытаюсь задать кнопкам №1 №2 - https://jsfiddle.net/67wcyurb/

вот такой эффект атома - https://jsfiddle.net/Lz514wvq/

перенес все анимацию в свой вариант, но что то не работает, помогите разобраться

[npofopr]

Вы ничего не перенесли. 
Ни одного кейфрейма не вижу. 

[viliksar]

31 минуту назад, npofopr сказал:

Ни одного кейфрейма не вижу.

упс

при этом кнопка крутится вся, как же добавить эффект сам

https://jsfiddle.net/67wcyurb/1/

Edited November 26, 2018 by viliksar

[npofopr]

Вы консолью совсем не пользуетесь? 
Эффект идёт за счёт точки, .dot 
её и надо крутить. 

Примерно так https://jsfiddle.net/npofopr/67wcyurb/4/ но надо дорабатывать. Там размеры надо проверять. 

[viliksar]

17 минут назад, npofopr сказал:

Примерно так https://jsfiddle.net/npofopr/67wcyurb/4/ но надо дорабатывать. Там размеры надо проверять. 

размеры dot? добавлял высоту, ширину, эффект не изменяется, т.е. не по окружности копки работает анимация, а как увидеть в консоле какая часть кода отвечает за ширину диапазона?

[spdif]

Это странно! 

Эффект в примере atom с применением переменных css. 

Вы "все" скопировали? нет конечно!

псевдо-элемент :root -где? "там собственно и объявлены переменные" 

добавить :root  - поменять имена классов и значения на нужные)

должно получиться примерно так http://jsfiddle.net/0kpbjqem/ 

...