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.


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


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


Simple Button

Transparent Button Examples

Pexels transparent buttons 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

author's bio photo

Hi there! I am Avic Ndugu.

I have published 100+ blog posts on HTML, CSS, Javascript, React and other related topics. When I am not writing, I enjoy reading, hiking and listening to podcasts.