版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/kangkang_style/article/details/87621090
FloatButton
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Float Button</title>
<style type="text/css" rel="stylesheet">
#button {
font-family: "Gill Sans", "Gill Sans MT", Calibri, sans-serif;
position: absolute;
font-size: 12px;
text-transform: uppercase;
right: 10%;
width: 50px;
height: 50px;
margin-left: -100px;
top: 15%;
border-radius: 50px;
color: white;
text-shadow: -1px -1px 1px rgba(0,0,0,0.8);
border: 5px solid transparent;
border-bottom-color: rgba(0,0,0,0.35);
background: #427BFF;
cursor: pointer;
animation: pulse 1s infinite alternate;
transition: background #427BFF 0.4s, border 0.2s, margin 0.2s;
}
#button:hover {
background: #427BFF;
margin-top: -1px;
animation: none;
}
#button:active {
border-bottom-width: 0;
margin-top: 5px;
}
@keyframes pulse {
0% {
margin-top: 0px;
}
100% {
margin-top: 6px;
}
}
#bg {
width: 100%;
height: 500px;
background-color: black;
}
</style>
</head>
<body>
<div id="bg"></div>
<button id="button">按钮</button>
</body>
</html>ButtomCss
<!DOCTYPE html>
<html>
<head>
<meta content="IE=7.0000" http-equiv="X-UA-Compatible">
<title>ButtonCss 悬停展开</title>
<meta content="text/html; charset=utf-8" http-equiv=Content-Type>
<style type="text/css" rel="stylesheet">
html,body,p{margin: 0; padding: 0;}
.bt-box{
width:200px;
height: 50px;
margin: 200px auto;
position: relative;
}
.bt-box .bg-1{background:#62aeff;}
.bt-box .bg-2{background:#fd933a;}
.bt-box .bg-3{background:#a851fa;}
.bt-box .xiaoA{
display:block;
width:200px;
height:50px;
position: absolute;
z-index: 2;
color: white;
font: 17px/50px Helvetica, Verdana, sans-serif;
text-decoration: none;
text-align: center;
}
.bt-box .xiaoA, .bt-box-p {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
-webkit-box-shadow: 2px 2px 8px rgba(0,0,0,0.2);
-moz-box-shadow: 2px 2px 8px rgba(0,0,0,0.2);
box-shadow: 2px 2px 8px rgba(0,0,0,0.2);
}
.bt-box .bt-box-p{
background: #222 ;
display: block;
height: 40px;
width: 180px;
margin: 0 0 0 10px;
text-align: center;
font: 12px/45px Helvetica, Verdana, sans-serif;
color:#fff;
position: absolute;
z-index: 1;
transition: margin 0.5s ease;
}
.bt-box:hover .bottom {
margin: 60px 0 0 10px;
}
.bt-box:hover .bottom2 {
margin: 110px 0 0 10px;
}
.bt-box:hover .top {
margin: -50px 0 0 10px;
line-height: 35px;
}
.bt-box:hover .top2 {
margin: -100px 0 0 10px;
line-height: 35px;
}
.bt-box .xiaoA:hover {
color: #fff;
background: #2f7fd5;
text-decoration: none;
}
</style>
</head>
<body>
<div class="bt-box">
<a href="#" class="xiaoA bg-1">展开</a>
<p class="top bt-box-p">上</p>
<p class="bottom bt-box-p">下</p>
</div>
<div class="bt-box">
<a href="#" class="xiaoA bg-2">展开</a>
<p class="top bt-box-p">上一</p>
<p class="top2 bt-box-p">上二</p>
</div>
<div class="bt-box">
<a href="#" class="xiaoA bg-3">展开</a>
<p class="bottom bt-box-p">下一</p>
<p class="bottom2 bt-box-p">下二</p>
</div>
</body>
</html>
FloatButtonSpread
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Float Button 展开显示</title>
<style type="text/css" rel="stylesheet">
.bt-box{
width:40px;
height: 40px;
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
.bt-box .bg-1{background:#62aeff;}
.bt-box .xiaoA{
width:45px;
height:45px;
position: absolute;
z-index: 2;
color: white;
font-size: 12px;
display: flex;
justify-content: center;
align-items: center;
}
.bt-box .xiaoA, .bt-box-p {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 50px;
-webkit-box-shadow: 2px 2px 8px rgba(0,0,0,0.2);
-moz-box-shadow: 2px 2px 8px rgba(0,0,0,0.2);
box-shadow: 2px 2px 8px rgba(0,0,0,0.2);
}
.bt-box .bt-box-p{
background: #62aeff ;
height: 40px;
width: 40px;
font-size: 12px;
color:#fff;
position: absolute;
z-index: 1;
transition: margin 0.5s ease;
display: flex;
justify-content: center;
align-items: center;
}
.bt-box:hover .bottom {
margin: 40px 0 0 10px;
}
.bt-box:hover .top1 {
margin: -50px 0 0 0;
line-height: 35px;
}
.bt-box:hover .top2 {
margin: -100px 0 0 0;
line-height: 35px;
}
.bt-box:hover .top3 {
margin: -150px 0 0 0;
line-height: 35px;
}
.bt-box:hover .top4 {
margin: -200px 0 0 0;
line-height: 35px;
}
.bt-box .xiaoA:hover {
color: #fff;
background: #2f7fd5;
text-decoration: none;
}
#button {
font-family: "Gill Sans", "Gill Sans MT", Calibri, sans-serif;
position: absolute;
font-size: 12px;
text-transform: uppercase;
right: 50%;
width: 40px;
height: 40px;
margin-left: -100px;
bottom: 50%;
border-radius: 50px;
color: white;
cursor: pointer;
animation: pulse 1s infinite alternate;
transition: background #62aeff 0.4s, border 0.2s, margin 0.2s;
}
#button:hover {
margin-top: -1px;
animation: none;
}
#button:active {
border-bottom-width: 0;
margin-top: 5px;
}
@keyframes pulse {
0% {
margin-top: 0px;
}
100% {
margin-top: 6px;
}
}
</style>
</head>
<body>
<div id="button">
<div class="bt-box">
<div class="xiaoA bg-1">List</div>
<div class="top1 bt-box-p" @click="makeChoose(0)">vue</div>
<div class="top2 bt-box-p" @click="makeChoose(1)">reat</div>
<div class="top3 bt-box-p" @click="makeChoose(2)">angular</div>
<div class="top4 bt-box-p" @click="makeChoose(3)">zapto</div>
</div>
</div>
</body>
</html>