Home / Frontend Codes and Demos / CSS Code Demos

CSS Code Demos

Here you can find the collection of all css, HTMl and JavaScript detailed code examples from codepen.io and other resources. Examples has code snippet, download options and find the license of the code. This page covers the listed demos.

  • Effects (Animation Examples, Animation Libraries, Hover Effects, Image Effects, Page Transitions, Text Effects)
  • Essentials (Arrows, Background Patterns, Quote Styles, Cards, Color Palettes, Dividers, Link Styles, Loaders, Modal Windows, Notifications, Ribbons, Spinners, Timelines, Tooltips, CSS Buttons, Progress bar)
  • Inputs (Checkboxes, Forms, Input Text, Radio Buttons, Select Boxes, Toggle Switches)
  • Layouts
  • Media (Calendars, Carousels, Clocks, Gallery, Music Players, Sliders, Slideshows, Tables, Thumbnails)
  • Navigation (Accordions, Breadcrumbs, Hamburger Menu Icons, Headers and Footers, Hotspots, Menu Styles, Pagination, Tabs)

Naturalized Checkbox Toggle Switches

This demo is a response to a post by Marcus Connor addressing confusion with checkbox toggle switches. It’s an attempt to make them work more like switches. Drag the handles back and forth and see the checkbox state change. Developed using html, css and JavaScript. Demo and download available. Demo …

Read More »

Morph images on hover Menu Portfolio with pixi.js

Using Pixi.js plugin displacement filter to “morph” images while hovering connected sidebar links. Done using html, css, jQuery, TweenMax and pixi.js. Demo and download available. Demo Download Author Karlo Videk Created JUNE 29, 2018 License Open Compatible browsers Chrome, Firefox, Safari     <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script> <script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.3/TweenMax.min.js'></script> <script src='https://cdnjs.cloudflare.com/ajax/libs/pixi.js/4.7.1/pixi.min.js'></script> HTML …

Read More »

Colorful Flat Loading Icon

A different take on the loading icon. Developed using only in HTML and CSS. Kind of looks like the top of the Amazon Alexa. Demo and Download available. Demo Download Author matt henley Created NOVEMBER 13, 2018 License Open Compatible browsers Chrome, Firefox, Safari   HTML Snippet <div class="spinner"></div> CSS …

Read More »

Animated Stacked Slider with jQuery and Slick.js plugin

Animated stacked slider is developed using css, html, jQuery and slick.js plugin. Demo and Download available. Demo Download Author Camila Waz Created NOVEMBER 11, 2018 License Open Compatible browsers Chrome, Firefox, Safari   Dependencies <link rel='stylesheet' href='http://cdn.jsdelivr.net/npm/[email protected]/slick/slick.css'> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script> <script src='http://cdn.jsdelivr.net/jquery.slick/1.6.0/slick.min.js'></script> HTML Snippet <div class="slider__wrapper"> <div class="slider"> <div class="slider__content"> <div …

Read More »

CSS buttons styled to look like shirt buttons

CSS buttons styled to look like shirt buttons with a plaid flannel CSS background. There are not actually holes in the buttons. That is an illusion by placing different colored circles appropriately. Those are all done as a box-shadow from one transparent circle created from .button::after. The body tag is …

Read More »

Shadow effect when mouse hover the CSS Button

Shadow effect when mouse hover the CSS Button that is no where as cool as here. Developed using css and html. Demo and download available. Demo Download Author Jarrod Thibodeau Created OCTOBER 10, 2018 License Open Compatible browsers Chrome, Firefox   HTML Snippet <div id="button"> <h2>w3tweaks</h2> <div id="buttonTwo"> <h2>w3tweaks</h2> </div> …

Read More »

Pressable, iOS Compatible CSS Button

Pressable, iOS Compatible CSS Button.A ‘pressable’ CSS button that is still pressable on mobile safari. The secret is having ontouchstart=”” set in a containing element, allowing the :active pseudo-class to work; the body tag is fine. I am pretty sure this won’t work on Android, but I don’t have a …

Read More »