CLOSE
    A growing repository with 722 bundles & 9612 resources for web ninjas
    (freebies, plugins and snippets) updated & curated every day, so it never expires.
CLOSE
    • CSS Hover (92 submissions)

      Give your social interactive elements an attractive appearance by applying CSS hover and animation effects to them.

      • CSS Animated Effects Navigation

        A collection of various CSS hover effects for texts and links. The effects are really simple and they have been inspired by a Codrops article. There are 15 effects here, you can choose the one that adapts to your site. The code can be used personally and commercially.

      • Different CSS Button Hover States

        A set of buttons in CSS and HTML including 10 different states like center-out, left to right, top to bottom, skew fill, flexible grow, scale, radius, inner and outer shadows. The code is really lightweight, and you can easily implement and style each button to fit your needs.

      • CSS Text Styles & Hover Effects

        A collection of several hover effects applied to texts, creating different styles and experimenting with a good number of fonts. These styles can be applied to any website or app; the CSS code is easily modifiable and it is free.

      • Animated CSS Hover Effect Menu Icon

        A nice animated CSS menu icon with a hover effect that allows it to change its shape. First it is a hamburger menu icon, when hovered over it becomes an animated atom and when clicked and held it turns into a cross icon for closing. The snippet is simple, made by Alex Coven.

      • Stunning SCSS Hover Effects

        A compelling set of 10 hover effects made in SCSS. The effects represent different aspects of technology and life like travelling, nature, architecture, animals, cities and more. They are lightweight and can be integrated into any project, personal or commercial. All credits go to Renan C. Araujo.

      • Responsive Background Images CSS Accordion

        A simple accordion made in CSS with the capability to adapt to any screen size. It uses the images as backgrounds and implements nice hover effects. You can use it on any project for free. Created by Michael Ferry.

      • Pure CSS Questionnaire Concept

        A compelling questionnaire made in pure CSS with hover effects and a material design. It consists of a medium-size widget with a featured area that changes when you select an item of the menu. It is a free snippet, easy to implement in any project and created by Nikolay Talanov.

      • Pure CSS Stylish Hover Effects

        A set of ten hover effects for multiple purposes. The effects included are scanning, piano, burn, movement, comet, bent, bridge, wrecked and beat. It's a free code snippet, ready for implementation and created by Renan C. Araujo.

      • CSS Material Design Social Buttons

        These are a set of gorgeous social buttons made in CSS with a material design appearance. When hovered over, they show the effect, perfect for recent types of websites, and the buttons included are for Facebook, Twitter, Google+, Dribbble and skype, although you can add any social network since it uses FontAwesome icons.

      • Pure CSS Dropdown Menu

        A simple flat menu with smooth effects made in CSS format. It follows the mouse when you hover over one item, and it displays a submenu. The animations were carefully crafted with CSS and it can be implemented on any website. This was created by Codepen's user Robert.

      • Favourite Outlined Flat CSS Button

        A beautiful button with colorful outlined and flat styles made entirely in CSS. This button has nice effects on hover and click, making it ready to be used in any web or mobile project. It was created by Jamie Coulter.

      • CSS Bubbly Faces

        A set of bubbly faces made in CSS that can be used to create a menu. These faces blink randomly and they move when the user hovers over one bubbly face. It was created by Codepen user Yurippe.

      • Animated CSS Twitter Button

        An animated button for Twitter made in pure CSS. It was created having in mind the material design trend and its characteristic animations. It is perfect as a standalone element, but it needs a little tweaking if you are going to integrate it with other social networks. It was created by Scott Marshall.

      • Jelly Letters: CSS & JavaScript Hover Te...

        A CSS and JavaScript text effects that resemble jelly. It is a lightweight creation that also has a reflection. It can be implemented as a decorative element in any website or mobile app. It was created by Mauricio Allende.

      • Cool CSS3 Link Effects

        A set of effects for links made in CSS3, including left to right, right to left, start centered, different top and bottom options, cool square and more. You can integrate these link styles in any project and modify them if you want. The effects were created by Brenden Palmer.

      • CSS Button Hover Styles

        A code snippet made in CSS displaying three buttons with hover states and transitions. This is a lightweight creation that can be implemented in any web or mobile app project. It was created by Galen Strasen.

      • CSS & JavaScript Mouse-follow Hover Effe...

        A hover effect made in CSS and JavaScript that creates a bubble effect when hovered over, similar to the effect of the dock in OS X. It can be used perfectly in any website or even a mobile app. It was created by Hieu Huynh.

      • Scotch Digital: Exploding CSS & JS Logo

        A beautiful logo that explodes when you hover over it, made in CSS and JavaScript. It can be used in digital presentations and other public events as a decorative element that baffles your audience. It was created by Nicholas Cerminara.

      • Hobert Hovers: CSS Hover Effects Set

        Hobert Hovers is a set of hover effects made in CSS. The featured animations are all using SCSS, including left-to-right animations, right-to-left, fade slide from top, fade slide from bottom, fade in and out, fade and fill and flip to uncover. It was created by Martin Hobert.

      • Hover.css: Open Source CSS Hover Effects Plug...

        A set of hover effects for buttons, logos, SVG elements and links made in CSS3. You can modify them easily, and take advantage of its availability in CSS, Sass, and LESS. It is an open source creation licensed under MIT and it was created by Ian Lunn.

      • Animated CSS Business Card Mockup

        A business card made with pure CSS transitions that animates when you hover over. At first, it shows the logo and the basic information (name and occupation). When hovered over, the card displays the social and contact information, like phone number, website and Twitter account. It was made by M. Alex Junaedi.

      • CSS & jQuery Grid Zoom Effect

        A cool effect for zooming content, especially when it's in a gallery. The magic of this snippet relies in its smooth hover effect, which lets the hovered image flow through the container (thanks to the movement of the mouse). This is an easy to use snippet, made with CSS and JavaScript by Codepen's user Marco Barría.

      • Slide In: Intuitive CSS & jQuery Hover E...

        A simple CSS and jQuery snippet for creating a hover effect. It has the quality of identifying what element is hovered over next and that way it goes towards that direction (only up, down, left and right); this makes this hover effect kind of intuitive, although it is just a mind trick. It can be uses, modified and implemented freely.

      • CSS-only Calendar App Concept

        A simple calendar concept made with pure CSS. It is composed of a flat iPhone mockup showing a calendar in which you can select a date range, and then select the task you want to add to that date range. It is a compelling and useful creation by Codepen's user David Khourshid.

      • Hover Image Scale CSS Snippet

        A useful code snippet that shows us how to make a scale effect when we hover over the image. This code snippet not only shows the scaling, but it adds another layer with a simple caption. It has been created with HTML and CSS. This code snippet was created by Larry Geams, who also designed the images you see within.

      • CSS Rollover Menu States & Effects

        A set of rollover states entirely created in CSS. They are composed of triangular menus that activate different effects when hovered over. It includes logo reveal, grow regular and opposite, rotate right and left, and grow rotate. This code snippet was created by Andy Fought, who uploaded to Codepen.

      • CSS3 Funny Menu

        An excellent CSS menu created by Wagner Moschini with the appearance of stacked boxes. We can include it into our websites to make them more beautiful and striking, making it the main menu of a website, with the idea to drive users' attention to it.

      • Creative Link Effects jQuery Plugin

        A plugin made with jQuery that allows you to make a good number of creative link effects. By using pseudo-elements, we can add wonderfully animated transitions on hover, click or even as initial animations. The effects come in all sorts and shapes, so you’re bound to find one that suits your needs and looks amazing.

      • Simple Icon CSS Hover Effects

        A CSS snippet to create clean, classy hover effects for your icons using CSS transitions and animations. The results are quite different from each other, including highlights, slide animations in all directions, rotations, fades and much more.

      • CSS Images Caption Hover Effects

        A set of CSS effects to create a fancy hover effect for image captions. In the example, images are displayed and on hover, a caption appears giving us information about the author and a link button. Many effects are shown in the article, making it a great source of inspiration for new creations.

      • Original CSS3 Hover Effects

        A pack of effects made in CSS that demonstrates how to create slick thumbnail hover effects with amazing CSS3 animated transitions. When moving the mouse over the images, an animation will reveal a text about them and a link for further information. There’s a good amount of examples in here, a perfect starting point for even more designs of your own!

      • jQuery & CSS Hover Click Trigger Effect

        A jQuery and CSS plugin that allows you creating a plugin that ensures the element can only be hovered over and clicked inside the circular area. It plays with the circular element with the border-radius property, in which is common to see that the active area of that element does not match its shape, since it has stayed as a square.

      • jQuery & CSS3 Thumbnail Proximity Effect

        A stylish thumbnail proximity effect made with jQuery and CSS3, that scales the images when hovering over them. The cool part is that not only the selected image is enlarged, but also the ones close to it relative to their distance, giving a smooth result.

      • Circle Transitions CSS Hover Effects

        A set of CSS transitions for creating interesting hover effects on circles with CSS transitions and 3D rotations. You will be able to experiment with hover effects applied to circles and try different uses for them, such as the creation of circular thumbnails.

      • Blueprint: Responsive CSS Icon Grid

        A CSS icon grid created by Mary Lou that adapts and rearranges its columns depending on the size of the screen. The grid can be customized by applying hover and/or click transitions and animations which will give it a polished look.

      • Responsive jQuery and CSS List Flip Effect

        A responsive list organized as a grid with multiple elements on the same line made with jQuery and CSS. When hovering on top of the elements, they flip with a fancy animation and light up in different colors. Once we click the element, it takes the whole space on top of the others by sliding in from the side.

      • Social CSS Sliding Buttons

        A sliding set of social buttons made in CSS and created by Marius Balaj, inspired on a Dribbble shot by Paul Flavius Nechita. It includes buttons for Facebook, Twitter, Google+ and LinkedIn.

      • Hover CSS Social Buttons

        Created by Marius Balaj and uploaded to CodePen, this code snippet creates cool social media buttons with a hover slide effect applied with pure CSS. The buttons look really well and provide a more visually appealing alternative to the classic social media buttons.

      • CSS3 Responsive Navigation Menu

        A responsive menu that includes dropdowns on the design, created with pure CSS3. The elements on the menu are intended to resemble those on the periodic table. This menu was made and also uploaded to CodePen by the user Jeremy Cloutier.

      • CSS Sliding Menu Tiles

        A centered group of colorful icons with smooth slide animations made in CSS. It features mouseover effects for big screens and focus effects for smaller devices. As a fun little detail, an extra menu can be seen after entering the famous Konami code.

      • After-Effectsy CSS3 Transitions

        An awesome set of ten different transition effects created with CSS3 and activated on hover, perfect for applying them to images and/or icons. Their inactive states include overlays in circles and square shapes, in diverse variations. Created by ksk1015 and uploaded to CodePen by Joakim Wimmerstedt.

      • Twitter Logo CSS Animated Button

        A pretty circular icon displaying the Twitter logo over a white background. The surprise comes when moving the mouse over the element, which causes the logo to rotate, invert its colors and make the logo grow considerably larger. Uploaded to CodePen by Saurav Tomar.

      • CSS Sliding Border Navigation Menu

        A navigation menu created by CodePen's Marcello Africano. Styled with bright colors, it highlights elements on hover with a bar at the bottom of the selection, making use of a super smooth animation. Everything you see in the demo is coded with CSS.

      • CSS Unwraping Menu Hover Effect

        An interesting menu that features a contracted piece of "paper" that expands on hover by using a neat transition. After this, it displays a set of icons that can be used by the reader. Created by Nate Cohen based on a Dribbble shot by Adis Hasanic.

      • Pure CSS Trapdoor Hover Reveal

        The idea of this CSS snippet is to show pictures and be able to raise them on mouseover, showing a caption underneath. A cool shadow effect ensures the effect remains convincing for the visitor. This nice initiative comes from Joshua Hibbert.

      • CSS Books Collection Showcase

        A code snippet that displays some book covers sorted by category, adding a little animation when the mouse is over, showing a book stock; this is achieved by using the CSS box-shadow property. You can edit the book covers and place any image so its integration gets easy, for instance, into an online store or a catalog. This experiment was created by Grant Zabriskie.

      • Red & White Dots CSS Social Buttons

        A beautiful concept for a trio of social buttons that come with a rather particular (but very attractive) style: Red and white dots. These polka-dressed buttons have noticeably different states, expanding on hover and becoming darker when clicked. Coded by Chris J. Lebron.

      • CSS Animated Social Icons

        A cute set of animated social buttons, perfect to promote yourself at the end of any website, for example. The icons appear with a simple gray style, then sliding to full color once we move the pointer over them. The sites provided are Dribbble, Behance, Facebook, Twitter and Instagram. This snippet was created by Ryan Bishop.

      • CSS Hover Icon Flip to Text

        A simple code snippet for a circle containing an icon that flips to text on hover. It was made using CSS3 transformations and transitions, and it can be used in any website to present simple information or even add links to it. It was created by Andrew Do and uploaded to CodePen.

      • Simple CSS Split Text

        Split real-life text in twain, reveal some stuff inside. Could probably done with less code and not have the crazy FUC, but I've only got so much time this morning to get this out of my head so I can get on to real work.

      • Stereoscopic CSS3 3D Text Effect

        A stereoscopic 3D effect with CSS3 only. The author was just created playing around but then realized it actually works. Basically you just need one line of CSS. A text-shadow with a red and cyan offset and the trick is to use “em"s for the text-shadows. That way, if you change the font-size, the text-shadows change in the same proportion.

      • CSS3 Animated Social Media Icons

        A nice set of animated social buttons for four different social alternatives: Facebook, Twitter, Google+ and RSS Feeds. Initially, they come in a dark gray appearance, but when hovering over the icons, a slide moves down, revealing the logos in full color. It was uploaded to CSSDeck by Emilios M.

      • CSS Animated Sliding Social Buttons

        A nice couple of social buttons for the two most common networks: Twitter and Facebook. Hover over any of the two to see a "like" or "tweet" option animate from the bottom of the designs. Coded by Gonzalo Fuentes, based on an original Dribbble shot from Caleb Andrews.

      • CSS3 Inner Animation Social Buttons

        A fantastic set of social icons styled with a strong blue color. Their main attraction comes in the form of a smooth animation triggered on hover, which makes the circles lose their blue color, inverting the color palette on the buttons. There are five different websites to choose from.

      • Dark Social CSS Navigation

        A pleasing and subtle navigation menu created with pure CSS. It starts with a tiny block, including a minimalist icon, when you hover over this element, a set of icons with social networks appear, but with a much softer tone than the initial button. Pointing over each icon will pop-up a bubble with the name of each social service.

      • Animated CSS3 Downloader

        LukyVj from CSSDeck has decided to apply a recently-found effect to this full-screen loader, with neat results. It shows three screens in total: A simple "download" button with a white background when inactive, switching to black on hover. Finally, when clicking on it, a spiralling couple of glowing arrows signify the start of the download.

      • Interactive CSS Mega Shadow Text Effect

        A wonderful interactive shadow effect that can spread to huge proportions, taking the whole screen. The mouse works the magic: Left and right movements control the shadow size, which can go all the way to the frame of the page. Up and down movement manages the vertical position of the shadow.

      • CSS3 Box Shadow Transitions

        An amazing set of hover transitions created by Shinji Yonetsu. It contains everything you can think of: Masks, gradations, floating effect, slides, accordions and more. It even includes advanced effects for the most skilled developers or those wanting to create truly impressive designs.

      • CSS Flip Menu Perspective

        A sleek menu by CSS Deck user José Barcelon-Godfrey. He provides a nicely designed menu with smooth hover animations that show a description of the option we are highlighting along with a pretty background picture. Webkit browsers are recommended in order to get the most out of this tool.

      • CSS Flat Animated Menu

        A nice idea for an animated menu written in pure CSS. In order to make it work, simply hover over the "menu" button to see all the options come up with a lighting-fast movement. As you move the cursor over them, the selections will animate further to confirm they are active. 

      • Pure CSS3 Hover Vertical Menu

        A cool experiment generates a menu with a neat flat design and interesting animation effects. When hovered over, the items will perform a smooth transition as the corresponding icon spins around itself. Created by user Jitendra from CodePen using HTML and CSS.

      • CSS Radial Menu Experiment

        A cool experiment that uses only CSS with their option for radial menus. Based on an older pen, this is a recreation of that original project. The menu starts at the top corner and, making use of a transition, it displays a set of selections on hover. It was uploaded by Codepen's user Anonasaurus Rex.

      • CSS3 Circle Path Menu

        A beautifully styled CSS3 menu with animated circles. The idea is to have a big element floating around that releases smaller ones when we hover over it. While the process happens, the elements spin and move in an attractive manner thanks to the nicely applied transitions.

      • Animated CSS Ring Menu

        The CSS3 Ring Menu is just a simple unordered list with one superior link and four links as the list items. It activates on hover and uses a spiralling animation to show and hide the list elements. You can edit the code to improve its looks, functionality or even add effects.

      • CSS 3D Text Shadow Effects

        A project that provides a way to apply awesome effects to a piece of text. When hovering on the sentence, it moves forward and separates from the background, with a shadow accentuating the illusion. Also, the letters gain a 3D appearance, which gives them more presence.

      • CSS Hover-Activated Accordion

        A fantastic accordion styled with pure CSS. It expands and collapses its sections by just hovering the mouse over them, showcasing a smooth animation in the process. Also, it goes back to its original state right after moving the cursor away. Uploaded by CodePen's Cory.

      • Unorthodox CSS Links Hover Effects

        A super original set of seven different hover effects, all applied to regular text (which could be displayed inside your usual blog entry, for example). They include blurs, cloning, underlines and much more, all styled with the power of CSS. Uploaded to CodePen by Mateusz Kocz.

      • Blurring CSS Hover Effect

        A visually attractive experiment that makes full use of CSS to display a piece of text and apply a blurring effect plus an animated line going below it at the same time. Bring the mouse back to view the text again in normal circumstances. Uploaded by CodePen user Monkey Raptor.

      • Circular Motion jQuery & CSS Effect

        A nice jQuery and CSS plugin made by Mary Lou from Codrops. It helps you create a menu formed by floating circles. One main element will display options that, when hovered, will have a smaller circle complementing the information. It is created using the jQuery.path plugin for the animations.

      • 3D Thumbnail CSS Hover Effects

        A useful and complete Codrops tutorial is going to explain you an amazing set of techniques used to create appealing hover effects on a set of images. When touching the cursor, CSS 3D transforms are triggered, "bending" the image and revealing hidden information behind them.

      • Images Dropdown with CSS

        This fantastic design provides a very stylish way to display pictures through a dropdown menu of circular thumbnails that activates when hovering on the list icon on the bottom. It uses Sass with Compass to handle all the animation and overall operation of the snippet. Brought to life by CodePen user Alex Lime.

      • CSS Flat Calendar Template

        A CSS calendar design that originated from Dribbble and looks like some color-filled version of iOS 7, this cool calendar will allow us to schedule tasks at specific times of the day, conveniently marked with a red dot on their respective date. Simple, appealing and, above all, useful. Just the way we like it.

      • Creative CSS3 Animation Menus

        A truly impressive set of animated menus created with CSS3. We dispose of 10 examples with gorgeous transitions using blurs, slides, turns, zooms and more, applied either alone or in combination. If you want to have a good looking site with awesome menus, you won't find many choices better than this.

      • Navigation Dropdown With Unfold Effect

        Here we have a beautiful concept for a dropdown menu where the options unfold out of the main button like a piece of paper. Everything is styled with the power of CSS. The only downside we found was that the selections come down a bit too slowly, which may annoy some users.

      • Pure CSS Spin-Out UI Menu

        A very cool menu created in CSS by Billy Crist from CodePen. All you need to do is hover over the main menu icon, this will trigger a beautiful and smooth animation that displays all options available around the circle. Perfect for showcasing short or basic info in a tight space.

      • CSS Rounded Social Icons

        A pretty trio of social buttons created with pure CSS, perfect to promote yourself through every corner of the net. These buttons animate slightly on hover, raising from their original positions a little bit in order to represent interactivity with the user. They come in different colors, depending on the website they are attached to.

      • Fancy CSS Hover Icon Fonts

        A set of icon fonts that also come with a tutorial for teaching you how to get the most out of icon fonts, which are an amazing way to ensure high-quality viewing on retina displays. Apart from using the font, the author applies a wonderful hover effect to the set.

      • Alternative Select Element CSS

        This cool Pepsized tutorial will show you a nice alternative to the common select from tag applying only pure CSS. It provides a simple and user-friendly result, including a subtle fade animation to show the options on hover. It is important, however, to add some fallback for mobile devices and/or IE8.

      • Simple CSS-only Breadcrumb

        A cool light gray breadcrumb that has been created just by using CSS3. It is a beautiful code experiment that lets you know where you are on the website, and also, guides you through it with the help of a relevant blue color on every level when the breadcrumb is hovered over.

      • Colorful CSS3 Animated Navigation Menu

        With this thorough article, TutorialZine's  Martin Angelov is going to teach you how to create a beautiful navigation menu using pure CSS3 and the Font Awesome icon font. The dropdown will also include neat animations that will show options when hovering on the large icons.

      • Vertical jQuery & CSS Scroll Menu

        A scrolling menu created with jQuery and CSS. The menu has a very long list of elements on a medium sized box, which scrolls up and down as we hover on the respective section, all done with supremely smooth movements.

      • Responsive CSS Retina-Ready Menu

        An amazing menu that comes boosted with a number of very useful options that make it versatile and attractive. Is responsive design has three different layouts depending on the screen size, including a tablet-optimized version. Also, it is Retina-ready, this is achieved by using an icon font instead of images to avoid pixelation when zooming in.

      • Spinning Logos Fading CSS Effects

        A code snippet with spinning logos, perfect to animate a website or a mobile app. On hover, the jQuery logo spins and fades out while the jQuery-ui logo fades in. When you move your mouse out of the logo, it happens the same but in the opposite direction. You can edit the code to make it even more functional than the original.

      • CSS 3D Facebook Button Concept

        A button is created in 3D by using the Webkit-perspective property (that only works in Webkit browsers, of course). Then, it uses the transition property to trigger the transform animation when the button is hovered, which reveals the number of fans (that can be replaced by any other piece of information).

      • CSS Flying Twitter Bird Follow Button

        An awesome little social button that allows you to link visitors to any given Twitter profile with a smart animated element. It starts with a simple Twitter bird located on the top corner of the screen, when the user hovers over it, the bird moves to open space to a "follow me" button, while it begins to move its wings in flying motion.

      • CSS Social Media Instant Titles

        A set of social media buttons for sharing comprised in a simple bar. It can be used for liking or following purposes, displaying tooltips on hover. You can grab, modify and use this snippet at will. It was made by Anthony D'Alessio.

      • Incredible CSS Share Button

        A fantastic bar intended to provide links for social networks through elegant hovering mechanics. When moving the cursor over it, the button opens up, revealing links to four different social services. It makes use of a few CSS properties such as box shadows, transitions and transforms.

      • jQuery & CSS3 Related Posts Slide Out Bo...

        The idea behind this jQuery and CSS3 plugin is to show relevant posts that might've been lost with time. A list of related posts with their respective thumbnails comes out of the edge of the screen and a shuffle button on the bottom allows you to repopulate the list with new entries.

      • Vertical CSS3 Drop-down Menu

        A vertical menu design with only HTML and CSS3. It includes some new CSS properties that might only be supported with the latest browsers, so keep that in mind when implementing it. Also, it features an attractive set of animations and multi-level navigation.

      • CSS Twitter Button Concept

        A fantastic code snippet that provides a great way to promote your Twitter profile, attracting more followers and interactivity. The idea is to have a simple button with the Twitter logo and then make it animate whenever the visitors hover over it, revealing a button linking them to your desired profile.

      • CSS Social Flip Cards

        A fantastic set of twelve different flip cards, each linking the user to a different social network (including  Twitter, Facebook, Google+, Dribbble and many more). They are visually very appealing, featuring smooth hover animations that reveal the full-color versions of the icons. Uploaded to CodePen by Charlotte Dann.

      • Icon Fonts: CSS Social Count Meets Style

        A cool set of buttons to promote social sharing, carrying neat icon fonts and hover effects that allow the visitors to use their social credentials to tweet, like or +1 a piece of content. Everything is styled with the power of CSS3 by CodePen user Tim Pietrusky.

      • Collapse Expand List View all items Download Bundle Submit
    • Pure CSS Web Elements Effects (39 submissions)

      List of effects applied to sites with CSS3 elements.

      • CSS Shake: DOM Elements Smooth Shaking CSS Ef...

        CSS Shake is a set of classes perfect for animating any kind of DOM element. The shaking effects have different intensities, and you can mix them with other effects like opacity. With it you have basic, slow, little, hard, fixed, constant shake styles.

      • SVG Image Filters CSS Snippets

        A growing set of CSS filters for images. The filters you can find are saturation, hue, luminance, sepia, distort, matrix and more. With it, you can adapt the photographs to match the style of your site, like giving them a vintage or an old style.

      • CSS3 Magical Animations

        A set of magical animations for design elements like buttons or static images. This uses CSS only, and the animations include out effects, perspective, rotate, slide, math, bomb, boing and off the space. The code is licensed under MIT

      • CSS Animated Effects Navigation

        A collection of various CSS hover effects for texts and links. The effects are really simple and they have been inspired by a Codrops article. There are 15 effects here, you can choose the one that adapts to your site. The code can be used personally and commercially.

      • Different CSS Button Hover States

        A set of buttons in CSS and HTML including 10 different states like center-out, left to right, top to bottom, skew fill, flexible grow, scale, radius, inner and outer shadows. The code is really lightweight, and you can easily implement and style each button to fit your needs.

      • CSS Filter Effects Online Tool

        A set of nice filters made in CSS for creating effects like blur, brightness, contrast, grayscale, opacity, saturation. Each effect easily gives you the option to grab the respective CSS code to apply them to your images. Although it is experimental, it is quite handy at times.

      • Colorful CSS Button Effects

        A cool set of CSS animations for buttons. The animations include border effects and fillings in different colors. The code used is really simple to integrate on any website and it doesn't use any JavaScript. It was created by Chris Deacy.

      • CSS and jQuery Navigation Reveal Effect

        A nice CSS and jQuery effect for a navigation menu. It works by revealing a simple text menu once the button is clicked, putting apart the whole content window. The menu can integrate images if you need them, and the velocity can be modified at will. This snippet is free and was made by Codepen user ZCKVNS.

      • Stunning SCSS Hover Effects

        A compelling set of 10 hover effects made in SCSS. The effects represent different aspects of technology and life like travelling, nature, architecture, animals, cities and more. They are lightweight and can be integrated into any project, personal or commercial. All credits go to Renan C. Araujo.

      • Animated Material CSS Loading Button

        A beautiful, animated button made in CSS that once you click it, it transforms into a loading bar, and then into a confirmation button. It has a material style, and doesn't require much time to integrate into your website. Created by Bhakti Al Akbar Pasaribu.

      • CSS-only Material Design Buttons

        A set of animated material design buttons made in CSS, including effects when the user clicks and hovers. This buttons can be implemented easily on any website and you can modify the code at will. This snippet is free and it was made by Jon Brennecke.

      • Open Close CSS Animated Menu

        A responsive menu for mobile apps and ever for web purposes made in CSS. It includes several different icons and colors, giving it the appearance of a Metro interface with some effects and animations. This snippet was created by Vineeth.TR.

      • Pure CSS Stylish Hover Effects

        A set of ten hover effects for multiple purposes. The effects included are scanning, piano, burn, movement, comet, bent, bridge, wrecked and beat. It's a free code snippet, ready for implementation and created by Renan C. Araujo.

      • Playful JavaScript and CSS Trampoline Effect

        A beautiful plugin made with JavaScript for creating a simple trampoline effect that can be applied to any element, especially great for galleries image showcases. This plugin comes along with an article where Mary Lou explains us the creation process.

      • Bounce.js: CSS3 Animations JavaScript Library

        Bounce.js is a simple JS library that lets you create CSS3 powered animations. With it you can add spins, jelly and clock effects, road runner motion and many more to any element on your website. It was created by Tictail.

      • Animated CSS Twitter Button

        An animated button for Twitter made in pure CSS. It was created having in mind the material design trend and its characteristic animations. It is perfect as a standalone element, but it needs a little tweaking if you are going to integrate it with other social networks. It was created by Scott Marshall.

      • Easy CSS Mask Textures

        A code snippet with some mask effects made in CSS that makes the text look vintage. It is a simple effect that does not need any JavaScript and is easy to implement. It was created by Jeremy Frank.

      • CSS Navicons Transformation Snippet

        A menu made with navicons that transform when clicked. The icons start as the regular stack icon for "menu", but once clicked it turns into arrows (pointing three directions), a cross for closing, a plus sign for adding and a minus sign. It was created by Bennett Feely.

      • Cool CSS3 Link Effects

        A set of effects for links made in CSS3, including left to right, right to left, start centered, different top and bottom options, cool square and more. You can integrate these link styles in any project and modify them if you want. The effects were created by Brenden Palmer.

      • Animated CSS Dialog Effects

        A set of effects for modals created with CSS. They animate thanks to CSS transforms and animations that are supported by several modern browsers, and some effects use SVG animations of morphing paths with the help of Snap.svg. The resource is free and it comes with an article explaining the process.

      • Animate.css: CSS Animations Library

        Animate.css is a collection of cool, fun, and cross-browser animations compiled in a library to use in your projects. They are great for emphasis, home pages, sliders, and general just-add-water-awesomeness. It allows you creating custom and lightweight animations to style different design elements of your site. This library was created by Dan Eden Tweet

      • Axis: Web Elements Styling CSS Library

        Axis is a CSS library built on top of Stylus. It is an extensive library, but it doesn't require any additional knowledge besides the one you know of CSS. This library doesn't override any of the existent CSS, which gives you the confidence to use it without worries. It is ultra lightweight, and it works as an enhancer for the regular CSS. You can apply Axis to any element, but it works great in: - Typography. - Tables. - Elements for creating gradients. - Forms. - Buttons. - UI elements in general. It was created by Jeff Escalante. You can use it freely in any web development, or …

      • Error Monkey: Fun CSS 404 Page

        An error monkey is a beautiful way to tell your readers that they have reached a dead end on your website in a fun way. It is pretty simple, yet has a nice illustrated monkey that can actually be animated with easy CSS tweaks. It can be complemented with a search and texts to indicate a way back for your audience. Also, it replaces the cursor with a banana.

      • After-Effectsy CSS3 Transitions

        An awesome set of ten different transition effects created with CSS3 and activated on hover, perfect for applying them to images and/or icons. Their inactive states include overlays in circles and square shapes, in diverse variations. Created by ksk1015 and uploaded to CodePen by Joakim Wimmerstedt.

      • Inner Shadow Typography

        An experiment that replicates Photoshop's inner shadow layer style by using CSS3 plus Sass (with Compass). It is also very easy to change the color of the design thanks to a $change-me variable that just requires us to enter the color we desire. Created by Andrew Boyd from CodePen.

      • Masked Text with texture

        Daniel Riemer from codepen.io has published this amazing freebie where he's pretending to make an stamp text effect applying texture to the text with alpha png and css3 mask-image css techniques.

      • Sliding Door Hover Effect

        Here we have a set of elements similar to closed airplane windows with content hidden underneath them. In order to "open the windows" and check what's behind them, the user merely needs to hover the mouse over them. This triggers a nice CSS animation that reveals the material. Created by CodePen's Ana Tudor.

      • A Blue Background and Text Shadow Integration

        Katy DeCorah comes again surprising us with this text effect that integrates well with the bacground apparently made with CSS properties too.

      • Lined Shadows Text Effect with CSS

        The base64 encode pattern technique and background clip CSS property is used by Tim Holman in this freebie to create this interesting text effect without wasting no more than 15 code lines and applied to any font family and any text.

      • Pure CSS 3D Perspective Portfolio

        A CSS image gallery with some 3D animations and transition effects when we hover over each element. The animation allows to see the thumbnail description in a black box. This design is perfect for designers and animators who need to showcase their work.

      • Fly in, fly out

        Neil Carpenter share with us a funny text animation where the characters fly to the center and out of it. Besides, when the letters are not in the center, they are transformed into fuzzy circles. The transform of the characters has a bug if you are using IE 10; in Firefox the animation is very slow, but in webkit browsers like Chrome it works perfect.

      • Mirror Effect

        CSS3 mirroring effect achieved with the Transform module.

      • Simple CSS Split Text

        Split real-life text in twain, reveal some stuff inside. Could probably done with less code and not have the crazy FUC, but I've only got so much time this morning to get this out of my head so I can get on to real work.

      • Pure CSS3 Bouncing Dribbble Ball

        I created this logo using some basic and advanced CSS3 properties like transforms. The main trick here is that all the elements have borders and they are rotated and scaled in X-direction to give an oval shape.

      • CSS3 Isometric Text

        This 3D text effect was made with 2D transforms in order to keep cross-browser compatibility. These transforms are applied to both the content and the title, with the latter receiving two shadow effects in order to give it its 3D look. Created by Duncan Midwinter.

      • Fancy & Pushable CSS 3D Button

        A flat button that has been styled using only CSS shadows, to the point where it now has a 3D appearance. Shadow is applied on the button itself to give it dimension while the background has a more typical effect. When the button is clicked, animations provide a smooth "push" illusion.

      • Large Pressable CSS3 Navigation

        Navigation with large pressable buttons that animate nicely by David Hellman. The CSS is pretty simple to understand, the background of the menu is just a linear-gradient and the pressed effect is created using the box-shadows on both :active and :hover states.

      • Pure CSS Folded Corner Effect

        A subtle effect that allows you to display the image and then have a corner fold whenever the reader hovers over the element. It uses span elements instead of :before and :after pseudo-elements in order to ensure compatibility with multiple browsers. Uploaded to CSS Deck by Rishabh.

      • Masked Text-Shadow

        Using the CSS3 mask-image property to create a striped text-shadow (Webkit-only). …

      • Collapse Expand List View all items Download Bundle Submit
    • Cool CSS Text Styles (56 submissions)

      Multiple text styles in CSS

      • Jelly Letters: CSS & JavaScript Hover Te...

        A CSS and JavaScript text effects that resemble jelly. It is a lightweight creation that also has a reflection. It can be implemented as a decorative element in any website or mobile app. It was created by Mauricio Allende.

      • Scotch Digital: Exploding CSS & JS Logo

        A beautiful logo that explodes when you hover over it, made in CSS and JavaScript. It can be used in digital presentations and other public events as a decorative element that baffles your audience. It was created by Nicholas Cerminara.

      • Webfont Effects CSS Code Snippet

        A CSS code snippet with various web fonts by Google and different effects for each one of them. the effects include shadows, gradients and a sketch texture. This snippet was created by Codepen's user Stephy.

      • CSS & jQuery Legibility Optimizer

        A nice legibility optimizer created with jQuery for functionality and CSS for styling. It lets you modify the size of the texts thanks to a slider, and it also allows you to modify the mode (night or day). It is free for you to grab and use, and it was created by White Wolf Wizard.

      • Multi-line Text Fading

        A demonstration of multi-line text fading with CSS and repeating linear gradients. Also this effect is possible if you select the text.

      • Narrow middle text effect

        Bennett Feely continues to surprising us this time showing us a pretty clever way to make a narrow middle text effect just with text transform and font size CSS properties.

      • Input Text Transform CSS

        Simple and original input text built using the css3 transform property.

      • 3D White Text

        3D text effect using CSS3 text-shadow made easier to maintain with @for directive in Sass.

      • CSS Neon Lights

        Using text-shadow and keyframe animations to produce neon light effect. Javascript to enable it and hide the button.

      • Angled 3D Letters

        This amazing text effect uploaded by Tim Teeling from codepen.io shows a 3d blue text with a little bit angled transforming.

      • Transparent Text CSS3 Background

        An amazing effect brought to life with some HTML and CSS. It features a moving background image that can only be seen through a completely transparent set of letters, creating a fantastic illusion and bringing all the attention towards the text. This was created by JSFiddle user girlie_mac.

      • Mirror Effect

        CSS3 mirroring effect achieved with the Transform module.

      • jQuery & HTML5 Canvas Vibrating Text Eff...

        A jQuery and HTML5 text vibration effect that works by finding the path information to trace the character image. It is a lightweight creation, perfect for grabbing the attention of users in websites and mobile apps. This resource is free to use.

      • CSS3 Simple Text Effect

        Nice effect for texts achieved with CSS

      • CSS3 Text Effect

        Color and fade effect applied to text with CSS.

      • Specimen Typographical

        TEST / text-stroke / text-fill-color // just webkit, sorry.

      • Text Animation

        Text animation concept using Lettering.JS

      • Ice Cream Sandwich Text

        Pleasant and interesting effect that resembles an ice cream sandwich.

      • Double Stroked Text

        Effect of double stroke on a simple text using just CSS.

      • Glowing 3D Text

        Text animation with glow created by Joe Dearman posted in CodePen

      • 3D Text

        A mix of LESS for a simple text.

      • 3D Sass Text

        Text in 3d with shadow effect using SASS

      • Simple CSS Split Text

        Split real-life text in twain, reveal some stuff inside. Could probably done with less code and not have the crazy FUC, but I've only got so much time this morning to get this out of my head so I can get on to real work.

      • Text with Texture

        Noise filter applied to text with CSS.

      • CSS Mask-Image & Text

        I’ve implemented a subtle grey flecked texture effect over the white text. Hover over the box to see how it will degrade in non-supporting browsers.

      • Stereoscopic CSS3 3D Text Effect

        A stereoscopic 3D effect with CSS3 only. The author was just created playing around but then realized it actually works. Basically you just need one line of CSS. A text-shadow with a red and cyan offset and the trick is to use “em"s for the text-shadows. That way, if you change the font-size, the text-shadows change in the same proportion.

      • Shading with CSS text-shadows

        During the workshop I picked up a few sign painting terms that were new to me, and relevant to web designers as browser support for CSS text-shadows becomes more widespread. Check out these various shading techniques on the demo page I made to accompany this post. Each of my examples uses multiple text-shadow values, which is pretty well supported (and even possible in Internet Explorer), but I encourage you to design with progressive enhancement in mind.

      • Using CSS Text-Shadow to Create Cool Text Eff...

        The CSS3 text-shadow property has been around for some time now and is commonly used to recreate Photoshop’s Drop Shadow type shading to add subtle shadows which help add depth, dimension and to lift an element from the page. This isn’t all the text-shadow property is capable of though, by getting creative and playing around with the colours, offset and blurring we can create some clever and pretty cool text effects!

      • CSS & HTML Text Wrapper

        The CSS Text Wrapper allows you to easily make HTML text wrap in shapes other than just a rectangle. You can make text wrap around curves, zig-zags, or whatever you want. All you have to do is draw the left and right edges below and then copy the generated code to your website.

      • Selectable Text CSS Transition

        After creating an amazing transition effect starting from an image, Trent Walton was challenged by a user to repeat the result, but this time allowing visitors to highlight the text. Happy to comply, here we have his finished work, now with the aforementioned selectable text. Bear in mind it only works with WebKit browsers.

      • Quick Tip: Pure CSS Text Gradients Tutorial

        This is a 4 minute video tutorial in which the author explains how to add simple gradients to text using CSS3. This tutorial was created by Jeffrey Way. It shows step by step how to create the gradient, and he also gives you the code, in case you just want to implement it quickly.

      • Adding Stroke to Web Text

        Fonts on the web are essentially vector based graphics. That's why you can display them at 12px or 120px and they remain crisp and relatively sharp-edged. Vector means that their shape is determined by points and mathematics to describe the shape, rather than actual pixel data.

      • CSS3 Background-Clip & @Font-Face

        Here is the webkit happy code for this live example, sparing you all the structural bits from style.css.

      • Create a Letterpress Effect with CSS Text-Sha...

        The letterpress effect is becoming hugely popular in web design, and with a couple of modern browsers now showing support for the text-shadow CSS3 property it’s now simple and easy to create the effect with pure CSS. No Photoshop trickery here!

      • Text Opening Sequence with CSS Animations

        A simple and fun text opening sequence effect with blurry letters using CSS animations.

      • CSS Text Shadows

        This JSFiddle project provides a small collection of text shadows applied to a set of attractive fonts, creating a compelling look. The shadows are definitely not like the usual ones, including striped and rounded details. Keep something in mind, though: These shadows will only work with webkit browsers.

      • CSS3 Text Shadow Extrude

        This CSS technique makes use of multiple shadows of different intensities to create this 3D effect that provides a smooth and clean appearance. Definitely useful to tiles or pieces of texts that require extra attention from the reader.

      • Inner Text-Shadow Trick

        This tip shows how to obtain inset shadows in our texts using CSS3's text-shadow property, making them look as if they were cut out from the background.

      • Text-Shadow Vs Drop-Shadow

        This JSFiddle project shows two different kinds of shadows showing very evident differences. One is a text shadow with a thick, solid black design, the other one (drop shadow) features a thin, light shadow that gives a much softer looks. It is up to you to make a choice and use what you like the most.

      • Super Rainbow Animated Text Shadow

        This is one hell of a trippy animation we found at JSFiddle. A huge text reads "groovy" while an (fittingly, groovy) animation displays a line of bright, saturated colors bleeding out of each letter, creating a very eye-catching effect that's sure to grab some attention.

      • 3D CSS Editable Text

        This 3D text uses multiple shadow effects in order to carry that style. Rishabh built upon Andrew Lee's original design, adding a little bit of rotation and making the text content-editable without having to modify the code, just click on the box and you are all set!

      • CSS3 Isometric Text

        This 3D text effect was made with 2D transforms in order to keep cross-browser compatibility. These transforms are applied to both the content and the title, with the latter receiving two shadow effects in order to give it its 3D look. Created by Duncan Midwinter.

      • Retro Style Text Effect

        This is a pretty fast retro shadow you can apply to any text. It actually is the combination of two shadows, one matching the background color, while the other one carries a softer tone of the same color. By the way, the font you are watching in the example is called Sansita One, just letting you know.

      • Embossed Text Effect

        This cool effect allows us to create an embossed text by just applying shadow to our design. It combines two different shadows, one white, the other black. It is recommended to match both text and background colors in order to achieve the correct result.

      • Fluffy Cloud Text Effect

        A nice fluffy cloud text effect created only with CSS3's text-shadow property. The text features a transparent color with four shadows that come together providing different blur radius and opacity. Keep in mind this effect will not be displayed in IE8 or lower.

      • CSS3 Text Shadow Effects

        This pack contains many colorful shadow effects that will surely be seen by your users. Double elements, multicolor shadows, shaky and many more are included in this project. Count it to Ade Arwans from CodePen for the posting of these elements.

      • Interactive CSS Mega Shadow Text Effect

        A wonderful interactive shadow effect that can spread to huge proportions, taking the whole screen. The mouse works the magic: Left and right movements control the shadow size, which can go all the way to the frame of the page. Up and down movement manages the vertical position of the shadow.

      • Skewed Text Shadow

        Matt Sullivan from CodePen provides us with this shadow effect that gives another dimension to the text, The shadow looks somehow twisted and skewed, which hints for a particular "light source" position.

      • Awesome Shadow: A Subtle Effect

        Here we have a colorful and cartoonish text with a very (and I mean very) subtle shadow behind it created in pure CSS. Created by CodePen user Os Vampireos.

      • Text Shadow Experiments

        A stripped-down shadow effect made in CSS. It helps bring out the text and give it more importance while also making it fancier. A Jeremy Shimko design hosted at CodePen.

      • Four CSS3 Text-Shadow Effects

        This useful CodePen project provides us with four types of impressive shadows for text:- Elegant: Subtle, yet compelling and stylish.- Deep: Gives a 3D effect to the text, totally bringing it out of the background.- Inset: Doing the opposite as the deep effect, making the text look as if it was engraved into the background.- Retro: A very simple approach that applies a thin shadow

      • CSS3 Text-Shadow

        This text features an interesting 3D effect and a very subtle shadow to separate it from the nice background we can find at the CodePen page. Everything is done with some fairly simple CSS by Tommy McDonald.

      • Inner Shadow Typography with CSS3

        This inner shadow effects gives a good deal of dimensionality and presence to the text. Definitely useful for titles and situations where what's written requires special attention. It is created and modified with CSS3 and Sass. All credit goes to Andrew Boyd.

      • CSS 3D Text Shadow Effects

        A project that provides a way to apply awesome effects to a piece of text. When hovering on the sentence, it moves forward and separates from the background, with a shadow accentuating the illusion. Also, the letters gain a 3D appearance, which gives them more presence.

      • Unorthodox CSS Links Hover Effects

        A super original set of seven different hover effects, all applied to regular text (which could be displayed inside your usual blog entry, for example). They include blurs, cloning, underlines and much more, all styled with the power of CSS. Uploaded to CodePen by Mateusz Kocz.

      • Blurring CSS Hover Effect

        A visually attractive experiment that makes full use of CSS to display a piece of text and apply a blurring effect plus an animated line going below it at the same time. Bring the mouse back to view the text again in normal circumstances. Uploaded by CodePen user Monkey Raptor.

      • Collapse Expand List View all items Download Bundle Submit
This a test message in global notification
Your download will start shortly.

Done!

Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

Browse
Done

Thank You!

Your post has been received, and will be reviewed by a curator

Open bundle builder

Bundle Builder

0 elements selected | Clear all ×

Select the bundle you want to add the items to.

Search bundle (filter by name)
Create new bundle
×

Add new bundle

×

Edit bundle