Collection of hand-picked free HTML and CSS ghost button code examples from Codepen and other resources.

Author

  • Kniw Studio

Made with

  • HTML / CSS

About a code

CSS Button with Hover Effect

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • Jhey

Made with

  • HTML (Pug) / CSS (Stylus)

About a code

Pure CSS Ghost Buttons with Directional Awareness

Thought I'd have a go at creating directionally aware buttons that fill based on how a child has hovered.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • Paraskevas Dinakis

Made with

  • HTML / CSS

About a code

Line & Direction

Another set of buttons.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • MARK

Made with

  • HTML (Pug) / CSS (SCSS)

About the code

Ghost Button

Ghost button hover effects in HTML and CSS.

Compatible browsers: Chrome, Edge (partial), Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • MARK

Made with

  • HTML (Pug) / CSS (SCSS)

About the code

Liquid Fill Buttons

Splatoon styled liquid fill buttons.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • Kitsune

Made with

  • HTML / CSS (SCSS)

About a code

Ghost Button Animation

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • Marcel Pirnay

Made with

  • HTML / CSS

About a code

Gradient Hover Animated Ghost Button

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • Cameron

Made with

  • HTML / CSS / JS

About a code

Animated Ghost Button

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • Hornebom

Made with

  • HTML / CSS

About a code

Animated Ghost Button

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -