How we can create sliding buttons using HTML & CSS? Solution: CSS Sliding Navigation Buttons On Hover, Pure HTML CSS Slide Button.
There are many types of navigation buttons, you can see on websites. I think a navigation button has a hover effect surely because nowadays everyone focuses on good UI. How many types of navigation buttons can you create, that completely depends on your creativity. I can just show you some examples.
Today you will learn how to create a basic sliding nav buttons. In other words, pure HTML & CSS sliding buttons reveal on hover. I know this is very simple to create, but beginners can’t create this easily that’s why I am sharing this. Also, a person on facebook asks me to create this, that is also a reason.
So today I am sharing CSS Sliding Navigation Buttons on hover effect. As I told this the easiest one to create & understand. These buttons have not any icons if you want to create this with icons, then see my Social Share Floating Buttons example. You will get an idea of how to place icons perfectly.
If you are thinking now how this buttons actually is, then see the preview given below. As I told before, this is a very basic one so its not contain any unique feature.
Preview Of Pure HTML CSS Slide Nav Button
See this video preview to getting an idea of how these sliding buttons look like.
Now you can see this visually. If you like this, then get the source code of its.
You May Also Like:
- HTML CSS Image Hover Effects
- Custom CSS Checkbox & Radio Button
- CSS Vertical Image Column
- Animated Search Box Expand
CSS Sliding Navigation Buttons Source Code
Before sharing source code, let’s talk about it. I created a div and heading inside hyperlink, that looks like this: <a> <div> <h1> </h1> </div></a>. Put the same code 4 times with different IDs, 4 times because I created 4 navigation buttons. I put hyperlinks because of this a nav button, in there we have definitely to put links.
I gave the div 400px width and 30 pixels border-radius. In first we have to small buttons, that why I put left: -335px to hide it. After that, on hover,I put the width 500px with 0 border-radius, & left: -50px. Now our buttons expand on hover then the heading text appears. I also put the 0.7s transition (get info) to give some animation effect.
That is the whole concept and things, Beginners will get this too easily. Also, I put some other properties like giving style to heading text, a shadow on hover, etc. Get the codes because there is nothing to explain more.
To creating these sliding buttons you have to create just 2 files. One for HTML & one for CSS. Follow the steps to creating this without any error.
index.html
Create an HTML file named ‘index.html‘ and put these codes given here below.
|
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 |
<!DOCTYPE html> <!-- code by webdevtrick ( https://webdevtrick.com ) --> <html> <head> <meta charset="UTF-8"> <title>Sliding Navigation Buttons | Webdevtrick.com</title> <link rel="stylesheet" href="style.css"> </head> <body> <a href="#"> <div id="butn1" class="button"> <h1>DESIGN</h1> </div> </a> <a href="#"> <div id="butn2" class="button"> <h1>DEVELOPMENT</h1> </div> </a> <a href="#"> <div id="butn3" class="button"> <h1>SEO</h1> </div> </a> <a href="#"> <div id="butn4" class="button"> <h1>CONTACT</h1> </div> </a> </body> </html> |
style.css
Now create a CSS file named ‘style.css‘ and put these codes.
|
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 |
/** code by webdevtrick ( https://webdevtrick.com ) **/ body { background-color: #30E2FF; } h1 { font-family: verdana, sans-serif; font-weight: bold; text-align: center; position: relative; color: #333; top: -10px; } a { text-decoration: none; } div.button { background-color: #ffffff; color: #2c3e50; border: none; border-radius: 30px; width: 400px; height: 60px; position: fixed; left: -335px; transition: .7s ease; } #butn1 { top: 100px; } #butn2 { top: 200px; } #butn3 { top: 300px; } #butn4 { top: 400px; } div.button:hover { background-color: #ffffff; position: fixed; left: -50px; width: 500px; border-radius: 0px; box-shadow: 0px 5px 0px #333; } div.button:active { background-color: #2c3e50; transition: 0s; color: #ecf0f1; } |
That’s It. Now you have successfully created CSS Sliding Navigation Buttons on hover. In short, Pure HTML CSS Button With Slide Effect. If you have any doubt or question comment down below.
Thanks For Visiting, Keep Visiting.
how to make it from right instead of left
Change the left properties to right
thanks for that but a question, how can we have the Sliding Navigation Buttons in every page?