Vue实现一个悬浮加号按钮

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