This is a cool button effect on hover the style of button changes as well as the background image fades to bluish background. Designed by Christopher Dunn. If you are having…
I am a fullstack web developer with a passion for SEO, creating stunning websites, and organic marketing. I am a perfectionist.
Toggle switch with nice gooey effect. Designed by Vincent Durand. If you are having trouble with the pen, try the archived copy on GitHub See the Pen Gooey toggle switch…
This is a cool scroll progress animation, where a line based logo is highlighted as you scroll down.This could be used to animate the logo as a user scrolls down…
Are you bored of one huge image at the top of the website? Then this is the solution Infinite Sliding Images. It brings the best content of your site to…
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…
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…
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…
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….
Have you seen those sites where you play a video and scroll down and there is a video thumbnail like sticky floating videos pops up on the screen? Think it was facebook that introduced this…
This is a simple add to cart button designed by Jack Oliver. When you click on the cart image button, you get a modal window coming up which will tell you that the item has added…
With this loader animation, which is done in pure CSS you can see that it looks like a slider puzzle with multiple squares moving in and out trying to solve the puzzle. This…