Как сделать кнопку быстрой связи поверх сайта?

Question

[kpa18]

Добрый день, хочу сделать кнопки быстрой связи для клиентов на сайте. Нужно, чтобы они всегда были справа и были закреплены вне зависимости от скролинга.
В css не силен.
Пример:

Всем спасибо.

Answer 1

[Everybody_Lies]

Посмотрите в сторону css свойства position: fixed;
https://jsfiddle.net/sgahoemL/

Answer 2

[wetali1985]

https://jsfiddle.net/wetali/bs7hvytx/2/

Comments

[Ankhena]

https://jsfiddle.net/h6Lfsnyb/
Так покороче, без i для иконок и без border-radius: 10em.
Как вы их вычислили эти 10em...

Ещё в ссылки добавить что-нибудь для доступности, aria-label или скрытые span вообще отлично будет.

[kpa18]

Ankhena, у меня почему-то это выглядит так:

[Ankhena]

kpa18, у вас это, простите, где?
Код с проблемой выкладывают в песочницу jsfiddle.net или аналоги. Или дают ссылку на сайт.

Хрустальный шарик говорит, что у вас слишком большой шрифт.

Можно поставить размер кнопки в зависимость от размера шрифта и центрировать флексами, вот так: https://jsfiddle.net/fqtx0an8/

[kpa18]

Как подогнать иконки по размеру?

[Ankhena]

kpa18, я выше ответила на этот вопрос и приложила ссылку на код для примера.

[kpa18]

Ankhena,
Подскажите пожалуйста, как мне разместить это кнопки справа, а не слева?
Спасибо!

[wetali1985]

kpa18, .icon-bar {
position: fixed;
top: 50%;
right: 0;
transform: translateY(-50%);
}

[wetali1985]

kpa18, добавить right: 0;

[Ankhena]

kpa18, возможно, вам больше понравится не 0, а 10px, чтобы отступ от края был