Your Web News in One Place

Help Webnuz

Referal links:

Sign up for GreenGeeks web hosting
December 16, 2021 07:24 am GMT

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

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.
Buy Me A Coffee


Original Link: https://dev.to/devrohit0/create-a-transparent-button-bd1

Share this article:    Share on Facebook
View Full Article

Dev To

An online community for sharing and discovering great ideas, having debates, and making friends

More About this Source Visit Dev To