Introduction:
In the world of web design, small details can make a big impact. One such detail is the back to top button, a handy feature that allows users to effortlessly navigate back to the top of a webpage. In this blog post, we will explore how to create a stylish and animated back to top button using only CSS, adding a touch of interactivity and elegance to your website.
Step 1: HTML Markup
To begin, let’s set up the basic HTML structure for our back to top button. Within the body tag of your HTML, add
<!– back-to-top button by atcodez –>
<div id=’AT-top’><button aria-label=’Go to Top’ class=’btn-top’ onclick=’window.scrollTo(0,0)’ style=’border-radius:.3rem;border:none’><svg class=’b2t-icon’ fill=’currentColor’ height=’2em’ viewBox=’0 0 16 16′ width=’2em’ xmlns=’http://www.w3.org/2000/svg’><path d=’M2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2zm3.354 8.354a.5.5 0 1 1-.708-.708l3-3a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1-.708.708L8.5 6.207V11a.5.5 0 0 1-1 0V6.207L5.354 8.354z’ fill-rule=’evenodd’/></svg></button></div>
<!– back-to-top button by atcodez–>
Step 2: Styling with CSS
Now, let’s move on to the fun part – styling our back to top button with CSS. We will add basic styles for positioning, colors, and size, as well as some hover effects for interactivity.
<style>
#AT-top{color:#46aef7;position:fixed;right:2rem;bottom:2rem;background-color:#fff;border-radius:0.3rem;z-index:999}.btn-top { color: #0d6efd; border-color: #0d6efd; } .btn-top { display: inline-block; font-weight: 400; line-height: 1.5; color: #4a4a4a; text-align: center; vertical-align: middle; cursor: pointer; user-select: none; background-color: transparent; border: 1px solid transparent; padding: 0.375rem 0.75rem; font-size: 1rem; border-radius: 0.25rem; transition: color 0.15s ease-in-out,background-color 0.15s ease-in-out,border-color 0.15s ease-in-out,box-shadow 0.15s ease-in-out; }.btn-top { padding: 0!important; }html{scroll-behavior: smooth;}
</style>
Conclusion:
By following these simple steps, you can elevate your website with a stylish and animated back to top button using only CSS. This small yet impactful feature not only enhances user experience but also adds a touch of sophistication to your web design. Experiment with different styles and animations to find what best suits your website’s aesthetic. Happy coding!