This content originally appeared on DEV Community and was authored by Rohit Sharma
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.
This content originally appeared on DEV Community and was authored by Rohit Sharma
Rohit Sharma | Sciencx (2021-12-16T07:24:45+00:00) Make button transparent. Retrieved from https://www.scien.cx/2021/12/16/make-button-transparent/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.