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.
HTML :
<html>
<head>
<title>Overlay Bottom-Right Icon</title>
</head>
<body>
<div class="br-icon"></div>
</body>
</html>CSS :
<style type="text/css">
body
{
background-color: #d4d2d2;
}
.br-icon
{
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);
}
.br-icon::before
{
content: "+";
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
color: #fff;
font-size: 28px;
font-weight: 600;
}
</style>[xyz-ips snippet=”Overlay-button”]
To check other CSS solutions please check CSS
For video representation please check https://www.youtube.com/
Related Posts
Automatic serial number in HTML table – CSS Counter
Here we will discuss how to get serial number automatically in a column in the html table. CSS counters are “variables” maintained by CSS whose values can…
Read More
Bootstrap button loading – very easy method
How to create a bootstrap button loading or spinner In this tutorial we will discuss how to show loading animation on buttons. HTML : jQuery : Bootstrap…
Read More