An Interest In:
Web News this Week
- March 21, 2024
- March 20, 2024
- March 19, 2024
- March 18, 2024
- March 17, 2024
- March 16, 2024
- March 15, 2024
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.
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).
Original Link: https://dev.to/devrohit0/create-a-transparent-button-bd1
Dev To
An online community for sharing and discovering great ideas, having debates, and making friendsMore About this Source Visit Dev To