experiments/bees-knees
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Implement simple floating button

Browse source
This commit is contained in:
Marty Oehme 2025-06-08 17:44:49 +02:00
parent 48c345c53a
commit 66311c36ae
Signed by: Marty
GPG key ID: 4E535BC19C61886E
2 changed files with 116 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

73
static/style.css
View file

@ -20,3 +20,76 @@ body {
font-size: 24px;
margin-bottom: 5px;
}
.fab-holder {
position: fixed;
bottom: 50px;
right: 50px;
z-index: 999;
cursor: pointer;
}
.fab-icon-holder {
width: 50px;
height: 50px;
border-radius: 100%;
background: #016fb9;
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
}
.fab-icon-holder:hover {
opacity: 0.8;
}
.fab-icon-holder .icon {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
font-style: 25px;
color: #ffffff;
}
.main-btn {
width: 60px;
height: 60px;
background: #df73ff;
}
.fab-options {
list-style-type: none;
margin: 0;
position: absolute;
bottom: 70px;
right: 0;
opacity: 0;
transition: all 0.3s ease;
transform: scale(0);
transform-origin: 85% bottom;
}
.main-btn:hover + .fab-options,
.fab-options:hover {
opacity: 1;
transform: scale(1);
}
.fab-options li {
display: flex;
justify-content: flex-end;
padding: 5px;
}
.fab-label {
padding: 2px 5px;
align-self: center;
user-select: none;
white-space: nowrap;
border-radius: 3px;
font-size: 16px;
background-color: #666666;
color: #ffffff;
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
margin-right: 10px;
}