Vue实现一个悬浮加号按钮

Vue实现一个悬浮加号按钮

Vue实现一个悬浮加号按钮

简介

本文讲解如何使用html+css+js实现一个悬浮加号按钮。 效果展示

讲解

• html

代码语言：javascript代码运行次数：0运行复制

<div style="display:flex;">
		  <v-btn fab class="floating-button" color="#2196F" ">
		    <span class="btn-text">+</span>
		  </v-btn>
		</div>

• css

代码语言：javascript代码运行次数：0运行复制

.floating-button {
  border: 2px solid #2196F;
  position: fixed;
  bottom: 20%;
  left: 24px;
  border-radius: 50%;
  width: 60px;
  height: 60px;
}
.btn-text {
  margin-top: 5%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 50px;
  line-height: 1;
}

本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。 原始发表：2025-01-20，如有侵权请联系 cloudcommunity@tencent 删除前往查看htmlborderbuttondisplayflex