DEV Community

sa3i0l
sa3i0l

Posted on

Create FAB

FAB - Floating Action Button


        <div class="fab-container">

            <div class="button iconbutton">
                <i style="font-size: 2.5em; color: #000;" class='bx bxs-message-square-add'></i> 

            </div>

        </div>  

Enter fullscreen mode Exit fullscreen mode


.fab-container{
    position:fixed;
    bottom:50px;
    right:50px;
    cursor:pointer;

}


.iconbutton, .button{
    width:50px;
    height:50px;
    border-radius: 100%;
    background:#fff;
    transition: all 0.3s ease; 


}

.button{
    width:60px;
    height:60px;
}



.iconbutton i{
    display:flex;
    align-items:center;
    justify-content:center;
    height: 100%;


}


.iconbutton:hover, .button:hover {
    width: 70px; /* Increase width */
    height: 70px; /* Increase height */
}


Enter fullscreen mode Exit fullscreen mode

Top comments (0)