Overlay button on bottom right corner – simple CSS

overlay button

Overlay button on bottom right corner – simple CSS

Create an Overlay Effect Button

Learn to create an overlay button. In this tutorial we are going to create a button which is overlay as well as on div and is placed bottom right corner.

The button should be fixed at a position and should overlay each html element . An overlay button we can use for showing menus, social icons, etc.


    <title>Overlay Bottom-Right Icon</title>
    <div class="br-icon"></div>


<style type="text/css">
            background-color: #d4d2d2;
            position: fixed;
            bottom: 30px;
            right: 30px;
            z-index: 100;
            height: 75px;
            width: 75px;
            border-radius: 100%;
            background-color: #e91e63;
            box-shadow: 2px 2px 10px 1px rgba(0,0,0,0.58);
            -webkit-backface-visibility: hidden;
                  backface-visibility: hidden;
            -webkit-transform: scale(0.92);
                      transform: scale(0.92);
            content: "+";
            position: absolute;
            top: 50%;
            left: 50%;
            -webkit-transform: translate(-50%, -50%);
                  transform: translate(-50%, -50%);
            color: #fff;
            font-size: 28px;
            font-weight: 600;
Overlay Bottom-Right Icon

To check other CSS solutions please check CSS

For video representation please check https://www.youtube.com/

Leave a Reply

Your email address will not be published. Required fields are marked *

Back To Top