Welcome to our "Collection of CSS Ghost Buttons" article! In this carefully curated collection, we have gathered a selection of free HTML and CSS ghost button code examples from reputable sources such as CodePen, GitHub, and other valuable resources.

With our January 2023 update, we are thrilled to present two new additions to our collection, ensuring that you have access to the latest and most stylish ghost button designs available. These buttons are designed to provide a subtle and elegant way to enhance the user interface of your website or application.

Ghost buttons, also known as transparent or hollow buttons, have gained popularity in web design due to their minimalist and modern aesthetic.

Whether you're a beginner or an experienced coder, you'll find the resources you need to create visually stunning and interactive ghost buttons.

The versatility of these CSS ghost buttons allows you to customize them to match your website or application's branding and design aesthetic. You can easily modify the colors, sizes, hover effects, and transitions to create a seamless integration with your user interface.

Start exploring our collection now and unlock the potential to enhance user interaction on your website or application.

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: -

Demo image: SVG Button Hover Effect With Snap.svg

Author

  • Joost Kiens

Made with

  • HTML
  • CSS/PostCSS
  • JavaScript/Babel (snap.svg.js)

About the code

SVG Button Hover Effect With Snap.svg

Simple button hover effect by replacing the text in a button with an svg element which mimics the button in order to create an effect which can not (easily?) be done with CSS.

Author

  • Giana

Made with

  • HTML / CSS (SCSS)

About the code

Sass Button Border Hover Effect Mixin

CSS button with drawing effect on hover.

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

Responsive: no

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: -