如何在 HTML 网站上创建浮动按钮
在网站上你经常可以看到随着页面滚动而移动的浮动按钮。最常见的是订购电话、促销或单击箭头即可返回到开始处。
如果站点很简单，无法将 Javascript 或其他库连接到它，或者资源所有者根本不想这样做，那么在站点 HTML 侧面创建浮动按钮的方法将是最合适的。
表壳：VT-metall
了解我们如何为莫斯科一家金属加工公司 将招 韩国电话号码列表 聘成本降低 13 倍
了解如何
为此，您将需要一组标准的 HTML 标记语言功能，并辅以 CSS 样式。浮动按钮将是将资源用户重定向到页面顶部的相同链接。
优点：
设置简单便捷；
不需要脚本和库支持。
缺点：
按钮始终可见，即使位于页面的开始处；
急剧（瞬时）向上的运动。
也讀吧！
“关于商业和最喜爱的作品的 TOP 5 部电影”
阅读更多
要为网站创建浮动按钮，您将需要两个元素，即写在资源代码中的 HTML 链接和按钮的 CSS 样式，后者负责外观和位置并放置在样式文件中。
浮动按钮的运行原理是基于position:fixed属性。我们采用以下 HTML 结构：
<div class="fixedbut">奖金！</div>
<样式>
.fixedbut { 位置：固定；底部：20px；右：20px；显示：块；背景：#2db700；颜色：#fff；文字修饰：无；填充：6px 23px；字体大小：17px;}
.fixedbut:hover { 背景：#222; }
</style>
在这种情况下，创建了一个具有指定样式的 fixedbut 类的按钮，其中应特别注意 position: fixed; 属性，由于该属性，按钮变为浮动的。位置，即在页面底部右侧，用bottom:20px表示；右：20px；如果希望它位于左侧，则将右侧替换为左侧。其余风格皆为美观之用。
然而，这还不是全部，因为现在按钮在那里，但它没有响应点击。让我们尝试向网站的任意页面添加过渡。例如：
或使用常规链接：
它们的区别在于，第一个是 JavaScript，第二个是 HTML 标记。
要创建一个可以让用户向上移动的按钮，应该将链接值替换为#。这样，当你点击它时，页面就会滚动到顶部。
关于此主题的推荐文章：
营销技巧：如何证明你的产品是最好的
9 种客户忠诚度计划
从未失败过的销售触发器
这里还有一些技巧，不仅在为网站创建浮动按钮时有用：
添加指针事件：无；属性将阻止脚本运行或链接被点击。因此，如果点击链接</a>，那么什么都不会发生，也就是说，不会转换到指定的链接。
如果您希望单击链接时页面在新选项卡中打开，则应添加 target="_blank" 属性。