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

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.

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.

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.

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.

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.

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.

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.

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.

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.