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.
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;
}
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)
That will make your button completely invisible, unless that's what you're trying to do.