0

Here is my codepen: https://codepen.io/victoreugen2002/pen/RwgdKav The problem is that I can't make the button transparent.

body {
  margin-top: 60px;
}
.btn.btn-primary {
    color: #ffffff;
    position: relative;
    background: #000000;
    padding: 10px 30px;
    border-bottom-left-radius: 10% 40%;
    overflow: hidden;
    border-top-right-radius: 10% 40%;
}
.btn.btn-primary:before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -1;
    margin: -4px;
    border-radius: inherit;
    background: linear-gradient(to right, #ef4a25 0%, #fba72f 100%);
    overflow: hidden;
}
<a class="btn btn-primary" href="#">Contact Us</a>
Terry
  • 63,248
  • 15
  • 96
  • 118
Victor
  • 11
  • 3
  • Your question is not very clear, you are adding a `background: #000000` and expecting to be transparent? – Sheki Sep 30 '21 at 12:04
  • I tried adding background transparent, but it's not working, since it's taking the " background: linear-gradient(to right, #ef4a25 0%, #fba72f 100%);" from the ":before" – Victor Sep 30 '21 at 12:05
  • If you remove `background: #000000` is that the result that you are trying to achieve (It is not quite clear what the end result should be)? – Sheki Sep 30 '21 at 12:07
  • Instead of `background: #000000` you could use `background:rgba(0,0,0,0.1);` the last index from 0 to 1 it is controlling the transparency. – Sheki Sep 30 '21 at 12:10
  • If I use this `background:rgba(0,0,0,0.1)` it will show the whole background from the linear gradient with a little bit of transparency. – Victor Sep 30 '21 at 12:15
  • Like I said you can play around with the last value (like for example: `background:rgba(0,0,0,0.9)`, you can set it to 0 if you need it transparent) to achieve the wanted result, I don't really understand what you need and how the end result should look like (maybe you can post a foto of an mockup). – Sheki Sep 30 '21 at 16:03

0 Answers0