Facebook Icon Button with Hover Rotation Effect Using HTML & CSS
Modern web design often includes interactive UI elements that not only look great but also enhance user experience. This tutorial focuses on building a Facebook icon button with a clean design and a hover animation that rotates the icon — all using pure HTML and CSS.
What This Button Does
The button showcases a Facebook SVG icon inside a soft, neumorphic-style container. When the user hovers over the button:
The background appears to press inward (inset shadow).
The Facebook icon rotates 360 degrees and scales down slightly.
The icon’s color transitions from Facebook blue to dark gray.
This simple interaction adds life to your social media buttons and encourages engagement.
Key Features of the Button Design
1. Neumorphic Container
The button uses a neumorphism-inspired look:
Light gray background
Soft shadows that mimic a 3D pressed surface
Rounded corners and gentle padding
This creates a modern, tactile look that fits well into minimal UI designs.
2. Facebook SVG Icon
An inline SVG icon ensures:
Sharp and scalable rendering
Full control over color transitions
Compatibility with CSS animations (like rotation and scaling)
3. Hover Animation
The hover state activates the following changes:
Inner shadows simulate a pressed look
The icon rotates 360 degrees
Slight scaling (down to 90%) adds a playful dynamic
Color shifts to gray for contrast
How It Works (Behind the CSS)
.btn: The outer container usesdisplay: gridto center the SVG icon. Shadows and padding build the neumorphic effect.:hover: On hover, thebox-shadowchanges to an inset version, creating a pressed feel.svg:hover: The icon is animated withtransform: rotate(360deg)andscale(0.9). A smooth transition is handled bytransition: transform 0.5s.
Ideal Use Cases
You can use this button in:
Footer social media sections
About/contact pages
Portfolio links
Blog sharing widgets
It’s designed to grab attention without being overwhelming — subtle, stylish, and highly clickable.
Benefits of This Design
Lightweight: No JavaScript needed
Responsive: SVG scales beautifully on all devices
Customizable: Replace the icon with any other (Twitter, Instagram, etc.)
User-friendly: Smooth transitions feel professional and polished
Final Thoughts
With just HTML and CSS, you can build highly interactive buttons that reflect modern UI trends. This rotating Facebook button is a fantastic way to increase visual appeal and encourage user interaction — perfect for enhancing the social presence of any website.
This code uses HTML and CSS only — no JavaScript included.
Copyright – 2025 Github-Suriya (SURIYA MURUGAN)
Copyright – 2025 talhabangyal (Talha Abdullah Bangyal)
Permission is freely granted to anyone who obtains a copy of this software and its accompanying documentation files (referred to as “the Software”), allowing them to use, copy, modify, merge, publish, distribute, sublicense, and even sell copies of the Software. Additionally, users are allowed to permit others to use the Software under these same terms.
It is required that the above copyright notices and this permission notice be included in all versions or significant portions of the Software.
Please note, the Software is provided “as is”, without any form of warranty—express or implied. This includes, but is not limited to, warranties of merchantability, fitness for a specific purpose, or non-infringement. Under no circumstances shall the original authors or rights holders be held responsible for any claims, damages, or other liabilities that may arise from the use of the Software, whether through legal action, negligence, or otherwise.
All code on Freeofcosts.com is reviewed before publishing. Each post includes a live code editor with real-time preview, so you can experiment and learn by doing. Most code is open-source and free to use or modify under respective licenses.
