DIAMOND SHAPE GRID Author Tanisha J. March 12, 2020 Links demo and code Made with HTML / CSS PHOTO GALLERY A masonry style photo gallery. Author Russ Perry January 22,…
Design & Illustration
Check out this really cool contact button on hover changes to email address. Designed by Alberto Jerez. If you are having trouble with the pen, try the archived copy on GitHub See…
This is an amazing button effect, just hover over the buttons to see the colors invert, the icon rotate and the border grow from within the button. Designed by Cole Waldrip….
This is a cool text animation using SVG that shatters into pieces and if you want to see that in slowmo just hover. Designed by Arsen Zbidniakov If you are having…
A nice button effect that shows trees and stars on button hover. Designed by Nick Ciliak If you are having trouble with the pen, try the archived copy on GitHub See the…
This snippet shows you how you can add some really cool hover animation to your image gallery. You can use it to add image captions or other info. If you…
RETRO UI FEEDBACK FORM HTML and CSS retro UI feedback form. Author Alex August 2, 2018 Links demo and code Made with HTML (Slim) / CSS (SCSS) RESPONSIVE CSS 3D…
HEXAGON Pure CSS hexagon with gradient. Author iotacb July 18, 2019 Links demo and code Made with HTML / CSS (SCSS) HEXAGON LOADING WITH CSS Author Osama Belal July 1,…
You all will love these wonderful circular icons with a subtle horizontal parallax scroll to it when you hover over them, these were designed by Jamie Coulter. If you are…
If you want to show a circular button that morphs into a user submission form then this snippet by Greg Hovanesyan is just what you need. If you are having trouble with the pen, try…
RESPONSIVE SVG BLACK FRIDAY BADGE Badge with text on a path using SVG. Author Jon Uhlmann November 21, 2018 Links demo and code Made with HTML / CSS (SCSS) BOULDER…
This button will expand into a email subscription field, it will be a great CTA on sites where you have limited space to work with. It was designed by Yariv Fruend. If you are having trouble with…
An impressive pricing table with neon buttons that has some subtle animation on hover designed by Jamie Coulter. The pricing table has an image section that does a horizontal scroll when the mouse moves over it. If…
This is a fancy little slideshow where the image splits into two vertically. The left side moves down and the right side moves up. It was designed by Fabio Ottaviani. If you are having trouble…
I am loving this hover effect by Tyrell Rummage, you have a bunch of cards with images in the background and a hovering text that acts as the title for these images. When…
This is a button that I came across on wickret.cuberto.com and thought there might be some landing pages where you want the visitors to notice the CTA button, it’s a bit over the top but it…
Here is a nice snippet to showcase both categories or services along with related blog posts within the navigation menu dropdown. This pure CSS snippet also has a nice hover effect for the…
Want you buttons and social media icons to have an 8-bit effect o hover, check out this handy tutorial and code snippet from Tiffany Stoik If you are having trouble with…
MOUSE MOVE PARALLAX Simple parallax in HTML and CSS with little vanilla JavaScript. https://freefrontend.com/assets/img/css-parallax/Mouse-Move-Parallax-HTML-CSS-JS.mp4 Author oscicen January 10, 2019 Links demo and code Made with HTML / CSS / JavaScript…
PHOTO GALLERY A masonry style photo gallery. Author Russ Perry January 22, 2020 Links demo and code Made with HTML / CSS (SCSS) CSS MASONRY EFFECT Masonry effect created only…
Corner ribbons are usually a great way to highlight something in card UI designs. In this snippet, you will have the code to show a ribbon in any of the four corners. This pure CSS snippet…
This cool code snippet by Elior Shalev Tabeka gives user direct feedback upon submit button with built-in loading indicator. When you click on the animated go button, that changes its background colour upon hovering,…
Check out this cool upload button animation designed by Eva Lettner. When you click on the upload button, the circular space will start to fill up and the upload icon will transform into a tick…
Want to use the Windows 10 toggle switch in your next web project? No worries use this handy little snippet by Kunuk Nykjaer that applies the Windows 10 styling to the input element with checkbox attribute. If…
This card UI is great if you want to add a review card to your website. In this example, we can see a couple of movies in the review widget. We can slide…
With this snippet, you can show a five-star rating snippet in your email campaigns. Something like this will work well to get feedback from your subscribers. It was designed by Maxx Scholten….
With this CSS only snippet designed by Giana has a cool button animation when you hover over it, the colour of the text and border changes from the bottom right. If you…
This is a stunning effect when you want to animate you background with gradients that changes on scroll. This CSS only snippet was designed by Mike. If you are having trouble with the pen, try the archived copy…
Check out 4 different image gallery hover animation effect using Swiper.js by Khanh. In the 1st vertical accordion like gallery when you hover over the image has a smooth slide pushing out the images around it to the side….