Vue实现一个悬浮加号按钮

最新推荐文章于 2024-02-06 11:28:11 发布

极客李华

最新推荐文章于 2024-02-06 11:28:11 发布

阅读量376

点赞数

分类专栏： uni-app学习之旅文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/qq_51447496/article/details/130975402

版权

uni-app学习之旅专栏收录该内容

19 篇文章 5 订阅

订阅专栏

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>

.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;
}