Ever wanted that dynamic background gradient colour that comes up in Spotify? Now you can get that same effect for you images with this pure CSS snippet. As you can see below, depending on…
HTML / CSS
If you are having trouble with the pen, try the archived copy on GitHub See the Pen CSS Gradient Counter List by Mattia Astorino (@equinusocio) on CodePen.
FLIPPING ARROWS Flipping arrows made with css-doodle. Author Sagee Conway September 24, 2019 Links demo and code Made with HTML / CSS / JS AWESOME ARROW ICON Animated awesome arrow icon with…
This is a really cool list that expands to show more info when you click on it, kinda like an accordion tab. If you click on the button that is shown…
Want to have a CTA button that is really in your face on one of your comical sites? Check out this bunch of pure CSS button animations by Olivia Ng. These buttons gets even crazier when…
RADIO BUTTONS WITH MARBLE AND WOOD Interaction with radio buttons made to look like Chinese checkers on a wooden board. Author Jon Kantner February 11, 2020 Links demo and code…
These radio buttons were styled using only CSS to look like accordion tabs. It was designed by Flkt Crnpio. If you are having trouble with the pen, try the archived copy on GitHub See the Pen Tabs….
A bunch of pure CSS underline effects that can be used for linksIOS Invisible Ink On Websites on your webpages, these were designed by Jordan Marshall. The effects include: a rainbow, slanted rainbow, shrinking…
This according tab designed by Benjamin Koehler unveils each tab content with a slide in animation. If you are having trouble with the pen, try the archived copy on GitHub See the Pen…
This css code snippet can be used as an app type menu or as iconified tabs which reveals an icon’s name on click. Designed by Ryan Smith. If you are…
In iOS 10 Apple included the Invisible Ink feature which allows people to send obfuscated messages to and from iPhone and iPads. With this snippet by Darryl Huffman you can recreate that same text effect on your webpages….
I am loving this spectacular multi-level folder/file structure layout by Louis Coyle. It has a nice grid layout with a list of folder and files and on clicking the folder it drills down into that folder…
Do you have a 360 panorama video you have recently taken on your smartphone or camera and do you want to showcase that on your webpage? You are in luck as this…
With this snippet designed by Corey Roth you have an unordered list on the right and a video on the left. When you click on each item in the list it loads up a different video…
Here is a fancy CSS only button designed by Yusuke Nakaya. When you hover over the button you have a burning effect over the button. This can work well on Halloween themed websites. If you…
INPUT TEXT Input text material with gradient. Author Lucas Oliveira October 7, 2019 Links demo and code Made with HTML / CSS (SCSS) INPUT GROUP Input group :focus-within. Author Aaron Iker…
This is a nice grid-style image gallery or blog archive layout that you can use in your webpages. When you hover over an image it slides in the description and a read more button. If…
If you are having trouble with the pen, try the archived copy on GitHub See the Pen DECONSTRUCTED by Ben Szabo (@finnhvman) on CodePen.
If you are having trouble with the pen, try the archived copy on GitHub See the Pen Circle Navigation by Jesús Castro (@gzuzkstro) on CodePen.
This is a cute jQuery plugin to create a sparkle effect on any dom element. Designed by simeydotme. If you are having trouble with the pen, try the archived copy on GitHub…
NON RECTANGULAR HEADERS Non-Rectangular header with inline SVG. Author Paolo Duzioni June 27, 2018 Links demo and code Made with HTML (Pug) / CSS (SCSS) CURVE HEADER Pure CSS curve…
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…
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…
NAV TAB Navigation tabs for two forms. Author Ilham Ibnu Purnomo November 22, 2019 Links demo and code Made with HTML / CSS CSS TAB Author Wendy November 11, 2019…
TEXT FILL ON HOVER Filling the text with a different color on hover – a creative text effect. https://freefrontend.com/assets/img/css-menu/text-fill-on-hover.mp4 Author G Rohit May 1, 2020 Links demo and code Made…
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,…
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….