When it comes to front-end development we have the top three languages for development like Html, CSS, and JavaScript. We have created Floating social media buttons with the help of Html as well. After hovering over the button it expands and shows further buttons for click. It has a lot of functionalities and features for a website. Let’s discuss them.
Floating Button CSS Features:
As you can see in the image we have created a floating button CSS. When you hover over the button then it shows further three more buttons at hover. They have message, email, and phone links. After hovering over them you can perform your task easily. After hovering over the buttons the new buttons appear in the form of animation. Let’s discuss how we have created floating button CSS.
Buttons:
Html provides a unique tag for creating the buttons. These buttons do not have functionality by using Html only. In Html, the buttons look simple without proper design. So, for adding functionality and design to our buttons we will be using CSS and Javascript languages as helper languages for better results.
How to design Floating Button CSS?
We created the buttons using the Html tag but the button was simple. Now we will link CSS properties with Html code. First of all, we will provide the shape of the buttons and the shape of these buttons is round.
The icons are imported using font awesome website properties. This website helps us to copy the code of font and icons as well in the form of CSS. We have used the code of plus, email, message, and call icons for our buttons.
Color:
CSS helps us to add color to our design and we have used different colors in our buttons. You can download the color code from the below file. The buttons have unique colors but the icons have the same color. There are different rules for providing color to the objects in CSS.
Animations:
CSS helps us to show the button in the form of animation. For showing the buttons we have used the animations property along with the hover effect. Because the buttons were showing animations after hovering over the floating Button CSS.
Let’s see how to create these buttons.
You might like it:
How to develop Floating button CSS?
For the development of these floating buttons in Html and CSS, we will use the below steps. Download a code editor Html code file CSS code file Download a code editor: Vs Code Sublime text editor or Brackets.
Html Source code
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
<!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title>Floating Button - FantacyDesigns</title> <link rel="stylesheet" href="style.css"> </head> <body> <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> <div class="floating-container"> <div class="floating-button">+</div> <div class="element-container"> <a href="google.com"> <span class="float-element tooltip-left"> <i class="material-icons">phone </i></a> </span> <span class="float-element"> <i class="material-icons">email </i> </span> <span class="float-element"> <i class="material-icons">chat</i> </span> </div> </div> </body> </html> |
CSS Source code
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 |
@import url("https://fonts.googleapis.com/css?family=Roboto"); @-webkit-keyframes come-in { 0% { -webkit-transform: translatey(100px); transform: translatey(100px); opacity: 0; } 30% { -webkit-transform: translateX(-50px) scale(0.4); transform: translateX(-50px) scale(0.4); } 70% { -webkit-transform: translateX(0px) scale(1.2); transform: translateX(0px) scale(1.2); } 100% { -webkit-transform: translatey(0px) scale(1); transform: translatey(0px) scale(1); opacity: 1; } } @keyframes come-in { 0% { -webkit-transform: translatey(100px); transform: translatey(100px); opacity: 0; } 30% { -webkit-transform: translateX(-50px) scale(0.4); transform: translateX(-50px) scale(0.4); } 70% { -webkit-transform: translateX(0px) scale(1.2); transform: translateX(0px) scale(1.2); } 100% { -webkit-transform: translatey(0px) scale(1); transform: translatey(0px) scale(1); opacity: 1; } } * { margin: 0; padding: 0; } html, body { background:#F2F2F2; font-family: 'Roboto', sans-serif; } .floating-container { position: fixed; width: 100px; height: 100px; bottom: 0; right: 0; margin: 35px 25px; } .floating-container:hover { height: 300px; } .floating-container:hover .floating-button { box-shadow: 0 10px 25px rgba(44, 179, 240, 0.6); -webkit-transform: translatey(5px); transform: translatey(5px); -webkit-transition: all 0.3s; transition: all 0.3s; } .floating-container:hover .element-container .float-element:nth-child(1) { -webkit-animation: come-in 0.4s forwards 0.2s; animation: come-in 0.4s forwards 0.2s; background:#FF6C6C; cursor:pointer; } .floating-container:hover .element-container .float-element:nth-child(2) { -webkit-animation: come-in 0.4s forwards 0.4s; animation: come-in 0.4s forwards 0.4s; background:#00C9B7; cursor:pointer; } .floating-container:hover .element-container .float-element:nth-child(3) { -webkit-animation: come-in 0.4s forwards 0.6s; animation: come-in 0.4s forwards 0.6s; background:#6168FF; cursor:pointer; } .floating-container .floating-button { position: absolute; width: 75px; height: 75px; background: #2cb3f0; bottom: 0; border-radius: 50%; left:0; right: 0; margin: auto; color: white; line-height: 73px; text-align: center; font-size: 26px; z-index: 100; box-shadow: 0 10px 25px -5px rgba(44, 179, 240, 0.6); cursor: pointer; -webkit-transition: all 0.3s; transition: all 0.3s; } .floating-container .float-element { position: relative; display: block; border-radius: 50%; width: 50px; height: 50px; margin: 15px auto; color: white; font-weight: 500; text-align: center; line-height: 50px; z-index: 0; opacity: 0; -webkit-transform: translateY(100px); transform: translateY(100px); } .floating-container .float-element .material-icons { vertical-align: middle; font-size: 16px; } .floating-container .float-element:nth-child(1) { background: #42A5F5; box-shadow: 0 20px 20px -10px #FF9AAC; } .floating-container .float-element:nth-child(2) { background: #4CAF50; box-shadow: 0 20px 20px -10px #9AFFE9; } .floating-container .float-element:nth-child(3) { background: #6168FF; box-shadow: 0 20px 20px -10px #9A9FFF; } |
Note:
Before creating and saving the Html and CSS, you have to name the files, and while saving them use .html and .css extensions at the end of file names. These extensions will help the browser and code editor to understand the type of files and run them easily.
Download the Source Code of Floating Button CSS:
In this file all the files and colors along with icons are present. Download the file for free.
Conclusion:
Html and CSS are two strong languages and help front-end developers to create any type of design for a website. They have a lot of tags and properties for development. If you are looking for more designs then check other posts as well related to Html, CSS, and javascript.
Task: Your task is to change the icons of all these buttons from font-awesome. Then change the animation style. The buttons should animate from right to left instead of bottom to top.
Thanks for reading this article.