Розумна плаваюча кнопка

by Сергій Куліков

HTML

Запрошую у мій Telegram канал, де я ділюся корисним: https://t.me/KulikovSerhiiChannel

<br><br>##########<br><br>



Приклад як це працює: https://kulikovserhii.pp.ua/e/03/
<br>
Відео-інструкція: https://youtu.be/pxASVGTBFMY



<br><br>##########<br><br>



<style>
	/* Стилі для <button> та <a> */
		.fixed-btn {
			/* Необхідні стилі для правильної роботи */
			position: fixed;
			z-index: 1000;
			bottom: 20px;
			right: 20px;
			left: 20px;

			/* Дизайн кнопки та спецефекти */
			pointer-events: none;
			background-color: #007bff;
			background-image: linear-gradient(180deg, #1e8bff 50%, #007bff);
			color: #fff;
			text-align: center;
			text-decoration: none;
			user-select: none;
			text-shadow: 1px 1px 1px #444;
			border: 1px solid #0053ab;
			border-top-color: #3094ff;
			border-left-color: #3094ff;
			padding: 10px 20px;
			border-radius: 5px;
			cursor: pointer;
			font: 20px Tahoma, Arial, Helvetica, sans-serif;
			line-height: 40px;
			/*box-shadow: 1px 1px 2px rgba(0, 0, 0, .3);*/ /* Менш об'ємна версія */
			box-shadow: 0px 1px 1px rgb(0 63 131), 0px 1px 0px rgb(0 63 131);
			-webkit-tap-highlight-color: transparent !important;
			opacity: 0;
			transition: opacity 1s cubic-bezier(0.68, -0.55, 0.27, 1.55);
			overflow: hidden;
		}

		.fixed-btn:active {
			outline: none;
			box-shadow: none;
			background-image: none;
			background-color: #007bff;
			box-shadow: none;
			bottom: 19px;
		}

			.fixed-btn:after {
				content: "";
				background: #fff;
				height: 150px;
				left: -100px;
				opacity: 0.50;
				position: absolute;
				top: -50px;
				transform: rotate(35deg);
				transition: all 550ms cubic-bezier(0.19, 1, 0.22, 1);
				width: 50px;
				z-index: -10;
			}

			.fixed-btn.scroll25:after {
				left: 120%;
			}

			.fixed-btn.scroll50:after {
				left: -100px;
				transition: all 0ms;
			}

			.fixed-btn.scroll75:after {
				left: 120%;
			}

		.fixed-btn.show {
			pointer-events: auto;
			opacity: 1;
		}

		.fixed-btn.scroll25...