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)

Pure CSS button Effects

Pure CSS Buttons.Some CSS3 Buttons. I was curious to see exactly what you could do with just CSS well SCSS. Any ideas on how to simplify it Demo/Download Author Jamie Pettman Created APRIL 09, 2015 Compatible browsers Chrome, Firefox, Safari   HTML Snippet <div class='wrapper'> <div class='title'> <h1>Pure CSS button …

Read More »

Simple pure CSS button hover effect

Simple awesome pure CSS button hover effect. Developed using html, css, vanilla-tilt.js and JavaScript. Demo and download available. Demo Download Author Julia Created FEBRUARY 14, 2017 License Open Compatible browsers Chrome, Firefox, Safari HTML Snippet <div class="button_container"> <p class="description">A simple pure CSS hover effect</p> <button class="btn"><span>Hover me!</span></button> </div> CSS Code …

Read More »

3D Tilt Parallax Effect with Mouse Movement

Learn how to create the 3D tilt parallax effect while moving a mouse cursor. Developed using html, css, vanilla-tilt.js and JavaScript. Demo and download available. Demo Download Author Ryan Yu Created MARCH 29, 2018 License Open Compatible browsers Chrome, Firefox, Safari Include Dependency <script src='https://cdnjs.cloudflare.com/ajax/libs/vanilla-tilt/1.4.1/vanilla-tilt.min.js'></script> CSS Code body { background: …

Read More »

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 »

CSS buttons styled to look like shirt buttons

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 utilized to create the plaid design with repeating-linear-gradient. body::before creates the horizontal lines and body::after creates the vertical lines. Developed using css and html. demo and download available.

Read More »

Pressable, iOS Compatible CSS Button

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 device to test on.

Read More »