Посмотрите на изображение. Первый - зависание. Как сделать такие эффекты наложения градиента на фоне градиента? Вот HTML code- https://github.com/itsumrat/olivia/blob/master/index.html#L127 Вот SCSS code- https://github.com/itsumrat/olivia/blob/master/assets/src/scss/components/_feature.scss 
Как сделать это css hover?
Это простые изменения фона на Hover:
#yourbutton:hover {
background: linear-gradient: ....;
}
Может быть, есть DIV в кнопке с маленькой белой каймой вокруг. Вы можете влиять на цвет этого div, чтобы иметь тот же результат, что и на изображении.
Как вы можете сделать цветной круг градиента по этому коду и пробелу между фоном и границей? Смотрите мой код. Вот код HTML-https://github.com/itsumrat/olivia/blob/master/index.html#L127 Вот код SCSS- https://github.com/itsumrat/olivia/blob/master/assets /src/scss/components/_feature.scss –
, пожалуйста, сообщите нам код, который вы пробовали? – kukkuz
Проверьте эту ссылку. https://css-tricks.com/css3-gradients/ –
Вы сделали бы это точно так же, как если бы он не наводил курсор, а затем помещал ': hover' на селектор. – 4castle