If you have 2 elements and they over lap and then you add a click event then it can become complex. So this script adds some z-index changing order to bring the active dot to the front. Mouse over the..
Just a quick clickable two box section with some logos and radial backgrounds, foundation for grid and responsive action. Quick demo:
I had to quickly add some dot points with names to a map the other day, so i thought i should probably look for a jquery library for tool tips or something similar. But then i thought why not just add..
Drop in this code in the header of your site to quickly add some social links in your header. Social Icons in Header This version uses foundation for the grid system. But you can swap this grid..
Just a nice quick section layout for a newsletter subscribe button and text. You could add this to a home page or just before the footer section of a page. Its also done in foundation gr..
A nice quick video on how to create a button with css and center it. Going from a blank html page into a div element with a button in it and then centering the button and giving it some life wi..
Add some sparkles to your text. Add some stars and rainbow colour effects to your text, source linked below.
Here is the full (almost full) collection of bootstrap elements in this kitchen sink code for bootstrap. Thanks to ycohio for this useful reference.
How can i make my website look like Windows 7? You can just add the Windows 7 CSS Framework to your site, and it will look like windows 7. Well almost like it, you will also have to add some custom c..
What is Radial Glow under cursor on box hover over effect? This code will allow the targeted boxes to have a radial glow effect on mouse over, so when you move your pointer over the box or element th..
Why would i want to use animations on my buttons? Button animations can be used for a variety of reasons. They can be used to add aesthetic appeal to a website or web application, or to provide a vis..
What is it? A button with a top and bottom border, when you mouse over it the border extends to the width of the button. Preview a preview of Animated Button Border when Active What can i use this..
CSS Shake is a CSS library that allows you to shake your elements using css classes. Install <link rel="stylesheet" type="text/css" href="https://csshake.surge.sh/csshake.min.css"> El..
What is simple.css? Simple CSS is a framework that you can just drop into your site, and it styles the actual html elements, so no class names are required for this out of the box, just add the scrip..
Here is a nice scrolling animated reveal effect on mouse over for menu items. Preview
What is Slider Show ? Slider Show is a standalone image carousel and slider. You can add text and images into each item and the number of the slide, and it will switch between them. This library..
What is it? A Card element with a rotating drop shadow animation with colour changes. What can i use this for? You could use this animation to add some character to your own elements. Conc..
What is it? A Large collection of buttons with hover over animations and styles. What can i use this for? You can use these to make the buttons on your website or web project more animated Concl..
What is it? Here we have a script that adds a Click Me Text above your links when they are hovered over or active. What can i use this for? Showing some additional information when your links..
Punica CSS is a clean, lightweight, responsive, modern and fully customizable (even class names) pure CSS Framework based on SASS/SCSS with multi-theme support. What is Punica? Pu..
What is Nighttime Flows Animated SVG Background This is an animated SVG which is generated by this other pen here that generates a random SVG, when clicked it mentions to check the menu for the SVG b..
Very slick Project management dashboard, showing some amazing UI Elements. Features Dark and Light Mode Listing Modes, in grid vs list Client Messages Popout section This is all in pure h..
An interesting take on a 404 error not found page with a space theme.
Here is a login form with animation around the submit button and as you mouse over it the button glows like a crazy nut! Also notice that the placeholder text floats over the input fields and when yo..
Here we have a nice way to layout some checkboxes in group format, giving each checkbox an icon and also a title. A nice form layout for checkboxes. Also would be good for touch input. &..
Here is a very slick example of Neumorphic ui elements, with some active examples. Credits Codepen, Maria M. Muñoz
A snazzy looking image and content slider, with some nice content animations. Using GSAP for the animations, no JQuery required for this slider.
A very cool looking form design here also using vue.js. As you type in the details the animated card fills in. Also as you select each element it will show you on the demo card which one is sel..
I am so excited about this carousel, it looks amazing! The 1st thing i thought when viewing this carousel, was wow, and the second thing i thought was what is GSAP. What is GSAP? Simply put, GSAP i..
Do you have boxes on your home page that need some new interactions.. Well go no further than these shiney boxes! :) Thanks to Ryan Mulligan for this code pen. Slightly tweaked and compiled t..
Some very nice examples of button animations using the neumorphic style of design. Check out the original codepen here.
a very funky mouse in and out transition to the link. hmm this breaks my demo, i will have to investigate this. So anyway i like this effect, but its not that useful to have all of your H1 l..
Found this awesome animation on codepen, link below, Not sure how re-usable it is, but wow!
Description this multiselect html control allows the user to click on the dropdown and select multiple items out of this list. there is also a control that allows selection of all the items in the ..
some nice looking pop over social links for the corner of your site
Found this awesome animated 404 error page on codepen the other day, crazily awesome animations on this one, just reload the demo page and you can see the animation as it loads in as well.
Here we have a sliding center mode carousel gallery made with css & vanilla js. This carousel is good if you need to keep your content up front and in the middle of the display. It can handle ima..