1
.bpw-floating-button {
2
    /* Aligns the button to the right side of the container */
3
    float: right;
4
    /* Sets the fill color of the button icon */
5
    fill: rgb(255, 255, 255);
6
    /* Changes the cursor to a pointer when hovering over the button */
7
    cursor: pointer;
8
    /* Removes the outline around the button when clicked */
9
    outline: none;
10

11
    /* Centers the icon inside the button element */
12
    display: flex;
13
    align-items: center;
14
    justify-content: center;
15

16
    /* Sets the z-index to ensure the button is on top of other elements */
17
    z-index: 1;
18
    /* Sets the width and height of the button */
19
    width: 52px;
20
    height: 52px;
21
    /* Changes the cursor to a pointer when hovering over the button */
22
    cursor: pointer;
23
    /* Rounds the corners of the button */
24
    border-radius: 50%;
25
    /* Adds a shadow effect to the button */
26
    box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.4);
27
    /* Clips any content that overflows the button */
28
    overflow: hidden;
29

30
    /* Removes padding and borders from the button */
31
    padding: 0;
32
    border: none;
33
    background-clip: padding-box;
34

35
    /* Adds a transition effect to the button when its size changes */
36
    transition: width 1s, height 1s;
37
}

1
.bpw-floating-button {
2
    background-image: url(YOUR_URL);
3
}

1
.bpw-floating-button i {
2
    /* Adds a transition effect to the icon when its opacity changes */
3
    transition: opacity 0.3s ease;
4
    /* Sets the opacity of the icon to fully visible */
5
    opacity: 1;
6
    /* Inherit the fill and stroke color from the parent button element */
7
    fill: inherit;
8
    stroke: inherit;
9
    /* Sets the width of the icon to 100% of the parent button element */
10
    width: 100%;
11
    /* Removes padding and sets line-height to 0 to center the icon */
12
    padding: 0;
13
    line-height: 0;
14
}

1
.bpw-floating-button .bpw-floating-button-unread {
2
    /* Displays the notification badge */
3
    display: block;
4
    /* Positions the badge to the top right of the button */
5
    position: absolute;
6
    right: 2px;
7
    bottom: 54px;
8
    /* Sets the width and height of the badge */
9
    width: 20px;
10
    height: 20px;
11
    /* Rounds the corners of the badge to make it circular */
12
    border-radius: 50%;
13
    /* Centers the text inside the badge */
14
    line-height: 20px;
15

16
    /* Sets the color of the text inside the badge */
17
    color: #fff;
18
    /* Sets the background color of the badge */
19
    background-color: #ff5d5d;
20
    /* Adds a shadow effect to the badge */
21
    box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.4);
22
}