How to create a transparent HTML / CSS button?

Question

I wanted o make a button to be transparent on my website the button named "NVIDIA GeForce NOW" on this website https://katu.ga/ would be transparent, and i could see the animated background of it. Please help me.

You can get the code here - https://github.com/TrainyBIG/katu.ga

Please look at my website - https://katu.ga/

Possible duplicate of [How to make a transparent HTML button?](https://stackoverflow.com/questions/22672368/how-to-make-a-transparent-html-button) — lurker, Oct 26 '19 at 16:14
No, that does not help me fix it... I want it to be posible to see the animations as on the website. The code just make it white. — Tadas Martisius, Oct 26 '19 at 16:15
if you apply `background: transparent` to button it will cover the color of card u r using or if u use `background: transparent` on card then u will see the transparent effect but ur all card will be transparent either u can add some css code — Kiran Mistry, Oct 26 '19 at 16:21
The issue is that your button is inside an opaque container ("card"). Perhaps you could construct a grid with a center square that is transparent and place your button inside the center grid. — lurker, Oct 26 '19 at 16:24
Yeah, the box fill be transparent. Is there a way to make in white, and the button transparent only? — Tadas Martisius, Oct 26 '19 at 16:24
Questions on Stack Overflow (all of the Stack Exchange Network) must be self-contained. The primary purpose of Stack Overflow is for questions to be useful to future visitors. Questions which are basically: "go look at my site and fix it", are not useful to future visitors. This question might be good/useful, but you need to move enough code into the question so we know what you're asking. Please see: [Something in my web site or project doesn't work. Can I just paste a link to it?](//meta.stackoverflow.com/q/254428) — Makyen, Oct 26 '19 at 17:42

lurker · Accepted Answer · 2019-10-26T17:11:07.367

Here's one way to achieve what you're after. I haven't examined the problem long enough to determine whether there's a simpler way. Here, I'm using a grid to create a rectangle for your "card" with a central cell that is transparent. The surrounding cells are opaque. Thus, you can keep the central rectangle transparent, unaffected by the opaqueness of the surrounding cells.

Let the following represent your page with the "card" div. I tooks some of the background properties from your container div.

<div class="background">
  <div class="card">
    <div class="item1"><h3>Some links:</h3></div>
    <div class="item2">&nbsp;</div>
    <div class="item3"><a href="https://download.nvidia.com/gfnpc/GeForceNOW-release.exe" class="button">NVIDIA GeForce NOW</a></div>  
    <div class="item4">&nbsp;</div>
    <div class="item5">&nbsp;</div>
  </div>
</div>

Here's the CSS representing the grid approach:

/* This represents your page */
.background {
  padding: 20px;
  background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
  background-size: 400% 400%;
  animation: gradientBG 15s ease infinite;    }
} 

.item1 {
  grid-area: head;
  background: lightyellow;
  padding: 0 20px 0 20px;
}

.item2 {
  grid-area: lpad;
  background: lightyellow;
}

.item3 {
  grid-area: main;
  background: transparent;
  text-align: center;
  padding: 10px;
}

.item4 {
  grid-area: rpad;
  background: lightyellow;
}

.item5 {
  grid-area: foot;
  background: lightyellow;
}

.card {
  display: grid;
  grid-template-areas:
    'head head head'
    'lpad main rpad'
    'foot foot foot';
  grid-gap: 0px;
  /*background-color: #2196F3;*/
  padding: 10px;
  background: transparent;
}

The workings of it are shown in this jsfiddle.

The result is as below. You can adjust paddings, colors, etc, to your taste. You should also study the grid element and understand its options which you can use to adjust how it behaves.

Hi, this really does help me, but i have a question. How can i add another buttton nearby and how do i remove text decoration and make it black? Cus i am gettin this - https://imgur.com/a/ScIsZvL — Tadas Martisius, Oct 26 '19 at 19:36
@TadasMartisius you can update the grid and arrange the cells however you wish, adding more buttons using that same idea. To get rid of the text decoration, you can change the style of the `a` element (should use a class to do this). I assume your original site does this since the decoration is the default in HTML. — lurker, Oct 26 '19 at 19:58

How to create a transparent HTML / CSS button?

1 Answers1