DEV Community

Rohit Sharma
Rohit Sharma

Posted on

Make button transparent

Hello Everyone, In this post we're going to discuss How we can create a button with transparent background. Yesterday, I created a Linktree like website for my personal use. So, when I'm adding buttons to it, the button background was not looking cool. So, I decided to remove the background of buttons.

You can also check out my website for better understanding.

Final result

HTML

HTML part is simple we just need a button.

CSS

First of all we need to add a background image to our parent <div> (in my case it is <body>). Then background-repeat:no-repeat and background-size:cover. So, this makes sure that our background-image cover the whole body area.

Now, style the button

button{
background:transparent;
border:none;
}
Enter fullscreen mode Exit fullscreen mode

So, when we set background:transparent the image that we used in<body> becomes visible through button but there is border around the button and we also remove it by using property border:none.

That's it for CSS part. We created our desired button. Now you can add some cool hover effect to make it more attractive(like neon effect).

If you love itβ™₯ then show some love.

Top comments (2)

Collapse
 
posandu profile image
Posandu
#buymeacoffee-btn {
  display:none !important;
}
Enter fullscreen mode Exit fullscreen mode
Collapse
 
codingjlu profile image
codingjlu

That will make your button completely invisible, unless that's what you're trying to do.