Часто нужно сделать кнопку на сайте, которая отображалась бы на всех страницах, была хорошо видна и не мешала бы просмотру контента.

Самый оптимальный вариант – плавающая кнопка.

Для начала задаем стиль кнопки CSS

<style type="text/css">
/*Кнопка заказа*/
.add_zakaz {
display: block;
width: 80px;
height: 150px;
position: fixed;
right: 0;
top: 200px;
z-index: 99999;
}
</style>

Где:
width:80px; — ширина картинки.
height:150px; — высота картинки.
right:0; — отступ справа, если вы поменяете данную строчку на left:0; — то кнопка будет располагаться слева, также можно указать отступ в пикселях, например: left:20px; Аналогично можно задать top:0; (кнопка сверху) и  bottom:0; (кнопка снизу) – например, чтобы показать кнопку только для мобильной версии.
top:200px; — верхний отступ.
z-index: 99999; — задает расположение элемента поверх всех остальных, например у картинки шапки в теме Twenty Eleven данный параметр имеет значение 9999 и если ваша кнопка будет иметь значение ниже данного параметра, то она будет располагаться под ней.

2. Прописываем вывод нашей кнопки на всех страницах, где она должна отображаться.

Сразу после тега body вставляем вывод нашей кнопки:

<a class="add_zakaz" href="#modal2"><img title="Кнопка палитра" src="/src/img/social/zakaz.svg" alt="buttons" /></a>

Как видите это код обычной ссылки, только для нее задан особый класс —
class="add_zakaz"

У меня кнопка открывает модальное окно, поэтому вызов кнопки я завернула в div

<div class="add_zakaz"> <a class="open_modal" href="#modal2"><img title="Кнопка палитра" src="/src/img/social/zakaz.svg" alt="buttons" /></a></div>

Как видите div class отвечает за расположение кнопки, а класс ссылки – за открытие модального окна.