How to Make a Floating Button on an HTML Website

[subornaakter20]

How to Make a Floating Button on an HTML Website

Very often on websites you can see floating buttons that move along with the page scrolling. The most common ones are ordering a call, a promotion or an arrow that you can click to return to the beginning.

If the site is simple and it is impossible to connect Javascript or additional libraries to it, or the resource owner simply does not want to do this, then the method of creating a floating button on the site on the side of the HTML will be the best fit.

Case: VT-metall
Find out how we reduced the cost of high school coaches email list attracting an application by 13 times for a metalworking company in Moscow
Find out how
To do this, you will need a standard set of HTML markup language functions, supplemented with CSS styles. The floating button will be the same link that redirects the user of the resource to the beginning of the page.

Pros:

easy and simple setup;

no need for scripts and library support.

Cons:

constant visibility of the button, even when located at the beginning of the page;

a sharp (instantaneous) upward movement.

Read also!

"TOP 5 films about business and favorite work"
Read more
To create a floating button for a website, you will need two elements, namely an HTML link, which is written in the resource code, and a CSS style for the button, which is responsible for the appearance and location and is placed in the style file.

The principle of operation of floating buttons is based on the position: fixed property. Let's take the following HTML structure:

<div class="fixedbut">Bonus!</div>

<style>

.fixedbut { position: fixed; bottom: 20px; right: 20px; display: block; background: #2db700; color: #fff; text-decoration: none; padding: 6px 23px; font-size: 17px;}

.fixedbut:hover { background: #222; }

</style>

In this case, a button of the fixedbut class was created with an assigned style, in which special attention should be paid to the position: fixed; property, thanks to which it becomes floating. The location, that is, at the bottom and on the right of the page, is indicated by bottom: 20px; right: 20px; If you want it to be on the left, then right is replaced with left. All other styles are used for beauty.

However, that's not all, because now the button is there, but it doesn't respond to clicking. Let's try adding a transition to any page of the site. For example: