Circular Ripple Hover Effect On Button

21.10.2018

Hover over each of the buttons to see the effect in action.

Made with: HTML,CSS,JavaScript

View Code

Circular Ripple Hover Effect On Button

Play Button

21.10.2018

Simple play button in pure CSS.

Made with: HTML (Pug),CSS (SCSS)

View Code

Play Button

Pure Css Select Box With Direction Aware Hover Effect

20.10.2018

Pure CSS select box without any JavaScript. When there is hover on an option the motion of icon inside option is decided by the direction of hover i.e up hover or down hover (direction aware hover effect).

Made with: HTML,CSS

View Code

Pure Css Select Box With Direction Aware Hover Effect

Social Media Icons

20.10.2018

Social media icons with hover and inverse actions.

Made with: HTML,CSS (SCSS)

View Code

Social Media Icons

React-Nprogress

20.10.2018

Made with:

View Code

React-Nprogress

Pure Css Select Box With Direction Aware Hover Effect

20.10.2018

Pure CSS select box without any JavaScript. When there is hover on an option the motion of icon inside option is decided by the direction of hover i.e up hover or down hover (direction aware hover effect).

Made with: HTML,CSS

View Code

Pure Css Select Box With Direction Aware Hover Effect

Arrow @Keyframes Animation

19.10.2018

Using checkbox as the basis of the arrow state.

Made with: HTML,CSS (SCSS)

View Code

Arrow @Keyframes Animation

Click Highlighter On Menu Button Using :After

19.10.2018

Using an :after pseudo element on a menu button, we can achieve a click highlighter effect. Similar to that of Google's Material Design.

Made with: HTML,CSS (SCSS),JavaScript

View Code

Click Highlighter On Menu Button Using :After

The Mine: No Js, Css Only Adventure Game

19.10.2018

The logic behind it is actually relatively simple and uses a 7+ year old technique. By clicking on an arrow (in this case a label), it checks the relevant input and then using the :checked pseudo selector, we can traverse down the DOM the correct amount of iterations and shift the entire viewport a whole 'segment' over. The lifts work entirely the same way except instead when we click down, we are actually checking the segment below.

Made with: HTML (Haml),CSS (SCSS)

View Code

The Mine: No Js, Css Only Adventure Game

Add Button Hover Animation

19.10.2018

Made with: HTML,CSS (SCSS)

View Code

Add Button Hover Animation

Css Progress Bars

18.10.2018

CSS progress bars made with svg patterns.

Made with: HTML,CSS,JavaScript

View Code

Css Progress Bars

Orange Clock

18.10.2018

Made with: HTML,CSS (SCSS),JavaScript

View Code

Orange Clock

Mobile Radio Buttons With Small Animation

18.10.2018

Mobile radio buttons as real buttons, simple look and feel with a small animation. Easy to use and to handle.

Made with: HTML,CSS (SCSS)

View Code

Mobile Radio Buttons With Small Animation

Chippy Checkbox Inputs

18.10.2018

Made with: HTML,CSS

View Code

Chippy Checkbox Inputs

Simple Registration Form

17.10.2018

Simple HTML and CSS registration form with validation.

Made with: HTML,CSS (SCSS)

View Code

Simple Registration Form

Bootstrap Cards

17.10.2018

Made with: HTML,CSS

View Code

Bootstrap Cards

Share Buttons Animation

16.10.2018

HTML and CSS share buttons animation.

Made with: HTML,CSS (SCSS)

View Code

Share Buttons Animation

Floating Contact Form Css

16.10.2018

Made with: HTML,CSS

View Code

Floating Contact Form Css

Cv Card Profile

16.10.2018

A digital card profile in wich resume all your essential professional panorama and easily share.

Made with: HTML,CSS (SCSS)

View Code

Cv Card Profile

The Future Of Possible

16.10.2018

Amazing mask effect CSS only.

Made with: HTML,CSS (SCSS)

View Code

The Future Of Possible