In the previous CSS post we saw how to create a custom dark themed Jquery datatable design. In this post we will learn how can we create bottom page button icon using only css. We will display a whatsapp icon in the right hand side corner of the screen. This can be useful when we want to display an icon like Contact Us, find us on maps, Mail Us, Contact via mobile, etc. In short there can be many relevant uses of this icon on your web application.
For create bottom page icon we will only use CSS and an image. Choose an image of your choice. I’m using Whatsapp icon which is 256×256 in dimensions.
On your HTML page, create two divs with class float, container like below:
<body> <div class="container"> <center><h1>How to create Bottom page Icon using only CSS.</h1></center> </div> <div class="float"> <a href="#"><img class="whatsapp-icon" src="whatsapp.png" alt="contact-icon"/></a> </div> </body>
The container will contain all our code and page elements i.e. our main container. float will only contain our bottom page icon or button. Below is the CSS for both of them:
CSS:
body
{
margin:-1px;
padding:0px;
overflow-x:hidden;
font-family:Arial;
background-color:#112732;
}
.container
{
width:100%;
height:1000px !important;
color:#fff;
}
.float
{
position:fixed;
width:60px;
height:60px;
bottom:40px;
right:40px;
background-color:#0C9;
color:#FFF;
border-radius:50px;
text-align:center;
box-shadow: 2px 2px 3px #999;
}
.whatsapp-icon
{
width:60px !important;
height:60px !important;
}
Here, I’m using an extra height for container div to demonstrate the usage. You have to remove or adjust it according to your requirements. This will create below result:
Full Page:
<!doctype html>
<html>
<head>
<title>CSS Bottom Page Icon Sample</title>
<style>
body
{
margin:-1px;
padding:0px;
overflow-x:hidden;
font-family:Arial;
background-color:#112732;
}
.container
{
width:100%;
height:1000px !important;
color:#fff;
}
.float
{
position:fixed;
width:60px;
height:60px;
bottom:40px;
right:40px;
background-color:#0C9;
color:#FFF;
border-radius:50px;
text-align:center;
box-shadow: 2px 2px 3px #999;
}
.whatsapp-icon
{
width:60px !important;
height:60px !important;
}
</style>
</head>
<body>
<div class="container">
<center><h1>How to create Bottom page Icon using only CSS.</h1></center>
</div>
<div class="float">
<a href="#"><img class="whatsapp-icon" src="whatsapp.png" alt="contact-icon"/></a>
</div>
</body>
</html>
You have to replace the Anchor tag link as per your requirements. Different icons and different color scheme can create an awesome UI. This is a very basic usage and it is compatible with small screens. Thanks for reading. Download free and open source HTML Templates.