Floating Button Using Html and Css

Create Floating Button Using Html and Css Code

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 

Create Floating Button Using Html and Css Code
 
 
Code byN/A
Project DownloadLink Available Below
Language usedHTML and CSS
External link / DependenciesYes
ResponsiveYes
 Floating Button
 

Preview Of Project That we create in this article❤

Create Floating Button Using Html and Css Code
 

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

Create Floating Button Using Html and Css Code
 

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!



Leave a Reply