Vue实现一个悬浮加号按钮

GeekLiHua

发布于 2025-01-21 16:47:48

5500

代码可运行

文章被收录于专栏：JavaJava

运行总次数：0

代码可运行

Vue实现一个悬浮加号按钮

简介

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

讲解

html

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

css

.floating-button {
  border: 2px solid #2196F3;
  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.com 删除

html