How to create Transparent Buttons in HTML and CSS[10 Examples]

Transparent buttons are great when you want buttons that blend with the background instead of covering it.

Creating Fully Transparent Buttons

Start by creating a simple button in HTML and CSS.

HTML Code

<button type="button">Transparent Button</button>

CSS Code

button {
  padding: 15px 25px;
  color: #eee;
  border: 1px #1864ab solid;
  background-color: #1864ab;
}
button:hover {
  background-color: #a5d8ff;
}

Result

Solid color simple Button

Then, change the background color value to transparent.

button {
  background-color: transparent;
}

Change the text color on the button so that its still visible under the new background.

button {
  color: #1864ab;;
}

Result

Simple Button

Transparent Button Examples

Pexels transparent buttons

Pexels.com transparent button

SpaceX Transparent button

SpaceX transparent button

Fly Emirates Transparent button

Fly Emirates transparent button

Creating Semi Transparent Buttons

To apply a semi transparent color we are going to use RGBA color notation. They stand for red, green, blue and alpha- transparency.

You can have transparency values between 0 to 1 where 1 is full transparency and 1 is zero transparency.

Using the same code for a fully transparent button, change the transparency value of background color to 0.1.

.button {
  background-color: rgba(24, 100, 171, 0.1);
}

Result Semi-Transparent Button

It is supported by 99.53% of the browsers globally.

You can also choose to use hexadecimal color value with opacity that has 94% browser support.

.button {
  background-color: #1864ab44;
}

Semi Transparent Button

Semi-Transparent Button Examples

Youtube Transparent button

Youtube transparent button