Create Floating Button Using Html and Css Code
Hello…Welcome to codewithrandom. today we are going to create a Floating Button Using Html and Css. Before that, you should know what is a floating button. Floating Button Is open and close button ,when you click plus(+) icon and 4 button popupop so hope you get idea what is floating button .
See Preview 👇 Floating Button Using Html and Css
.png "Create Floating Button Using Html and Css Code")
| Code by | N/A |
| Project Download | Link Available Below |
| Language used | HTML and CSS |
| External link / Dependencies | Yes |
| Responsive | Yes |
Preview Of Project That we create in this article❤
HTML Code For Floating Button
In this html code, we want to make a button icon that is divided into 4 parts i.e home setting logout, and help as shown in the code. If you want to add any icon you can add it.
<link
href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet"
/>
<div class="container">
<div class="btn-group">
<span></span>
<button class="btn"><i class="material-icons md-48">home</i></button>
<button class="btn"><i class="material-icons">settings</i></button>
<button class="btn"><i class="material-icons">logout</i></button>
<button class="btn"><i class="material-icons">help</i></button>
</div>
</div>
Portfolio Website using HTML and CSS (Source Code)
Html Code Output
CSS Code For Floating Button
In css code we want to design html code with background height weight and depending upon your need you can give height, weight, background, etc to your floating button and also you use a different color for the floating button.
* {
margin: 0;
}
body {
background: #fff;
}
.container {
height: 200px;
width: 300px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.btn-group {
height: 160px;
width: 160px;
border-radius: 160px;
transform: scale(0.5);
font-family: calibri;
position: absolute;
cursor: pointer;
transition: all 0.5s cubic-bezier(0.83, -0.24, 0.24, 1.31);
background-color: #fff;
vertical-align: middle;
}
.btn {
height: 80px;
width: 80px;
float: left;
font-size: 40px;
line-height: 80px;
border: none;
background-color: #2196F3;
color: #2196F3;
transition: all 0.5s cubic-bezier(0.83, -0.24, 0.24, 1.31),
background-color 0.25s ease-in-out, box-shadow 0.25s ease-in-out;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
}
.btn:hover {
background-color: #64B5F6;
box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.15);
}
.btn-group > span {
height: 60px;
width: 60px;
margin: 50px 50px;
position: absolute;
}
.btn-group > span::before,
.btn-group > span::after {
content: "";
background-color: #fff;
position: absolute;
border-radius: 10px;
}
.btn-group > span::before {
width: 10px;
height: 100%;
margin: 0 25px;
}
.btn-group > span::after {
width: 100%;
height: 10px;
margin: 25px 0;
}
.btn-group:hover {
transform: scale(0.85) rotate(45deg);
cursor: default;
}
.btn-group:hover > span {
opacity: 0;
}
.btn-group:hover > .btn {
border-radius: 100%;
color: #fff;
transform: rotate(-45deg);
}
.btn:nth-child(2) {
border-radius: 80px 0 0 0;
}
.btn:nth-child(3) {
border-radius: 0 80px 0 0;
}
.btn:nth-child(4) {
border-radius: 0 0 0 80px;
}
.btn:nth-child(5) {
border-radius: 0 0 80px 0;
}
.btn-group:hover > .btn:nth-child(2) {
margin: -5px 5px 5px -5px;
}
.btn-group:hover > .btn:nth-child(3) {
margin: -5px -5px 5px 5px;
}
.btn-group:hover > .btn:nth-child(4) {
margin: 5px 5px -5px -5px;
}
.btn-group:hover > .btn:nth-child(5) {
margin: 5px -5px -5px 5px;
}
.material-icons {
font-size: 36px !important;
}
click on the + icon and you can see we create a floating button using only html and css code.
10 Digit Phone/Mobile Number Validation In JavaScript
Final Output Of Floating Button Using Html and Css
Now you have successfully created a floating button. If you follow all instructions in this article, you should have a page that looks similar to the VIDEO that is mentioned in CSS FINAL OUTPUT. If you have any doubt or question comment down below . Hopefully you may like it !!
Which code editor do you use for FLOATING BUTTON coding?
I personally recommend using VS Code Studio, it’s straightforward and easy to use.
is this project responsive or not?
Yes! this is a responsive project
Do you use any external links to create this project?
Yes!
