I'm trying to change the button hover color to transparent but isn't working

Issue

Here is the code below. I’m trying to change the button hover color to transparent. the div class = "button_container" while the button class = "btn"
I changed the color initially but it isn’t working and I would appreciate any help that can be thrown my way.
Thank you in advance

I know this is mostly code I’m posting but I can’t figure it out. I believe the knowledgeable community here on Stack overflow can help me figure it out. Cheers

.button_container {
    position: absolute;
  left: 0;
  right: 0;
  top: 30%;
}

.description, .link {
  font-family: 'Amatic SC', cursive;
  text-align: center;
}

.description {
    font-size: 35px;
}

.btn {
    line-height: 1;
    border-radius: 5px;
    align-items: center;
    align-content: space-around;
    z-index: 2;
    height: 48px;
    width: 200px;
    border: none;
    display: flex;
    text-align: -webkit-left;
    cursor: pointer;
    text-transform: uppercase;
    outline: none;
    overflow: hidden;
    position: relative;
    color: #ffffff;
    font-weight: 600;
    font-size: 0.95rem;
    background-image: linear-gradient(90deg,#70AECD 0%,#022350 100%);
    padding: 1rem 1rem 1rem 3.99rem;
    margin: -10px auto;
    box-shadow: 0 5px 15px rgb(0 0 0 / 20%);
    flex-direction: row;
    flex-wrap: wrap;
    align-content: center;
}

.btn span {
  position: relative; 
  z-index: 1;
}
.btn:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 2.25rem;
    height: 100%;
    border-right: 1px solid #000000;
    padding:119px;
}
.btn:before {
    content: url(https://.com/wp-content/uploads/2021/06/.png);
    position: absolute;
    top: 0%;
    left: -11.25rem;
    width: 0rem;
    height: 73%;
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

.btn:after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  height: 858%;
  width:347%;
  background: #ffae25;
  -webkit-transition: all .5s ease-in-out;
  transition: all .5s ease-in-out;
  -webkit-transform: translateX(-98%) translateY(-25%) rotate(37deg);
  transform: translateX(-98%) translateY(-25%) rotate(47deg);
}

.btn:hover:after {
    -webkit-transform: translateX(-9%) translateY(-25%) rotate(47deg);
  transform: translateX(-9%) translateY(-25%) rotate(45deg);
}

.link {
  font-size: 20px;
  margin-top: 30px;
}

.link a {
  color: #000;
  font-size: 25px; 
}

Solution

I change your opacity so you can make it as transparent. I am not sure if this is what you mean or you want the text to change the color?? If so i change it. I dont have your html so this is what I came up with Let me know.

.button_container {
    position: absolute;
  left: 0;
  right: 0;
  top: 30%;
}

.description, .link {
  font-family: 'Amatic SC', cursive;
  text-align: center;
}

.description {
    font-size: 35px;
}

.btn {
    line-height: 1;
    border-radius: 5px;
    align-items: center;
    align-content: space-around;
    z-index: 2;
    height: 48px;
    width: 200px;
    border: none;
    display: flex;
    text-align: -webkit-left;
    cursor: pointer;
    text-transform: uppercase;
    outline: none;
    overflow: hidden;
    position: relative;
    color: #ffffff;
    font-weight: 600;
    font-size: 0.95rem;
    background-image: linear-gradient(90deg,#70AECD 0%,#022350 100%);
    padding: 1rem 1rem 1rem 3.99rem;
    margin: -10px auto;
    box-shadow: 0 5px 15px rgb(0 0 0 / 20%);
    flex-direction: row;
    flex-wrap: wrap;
    align-content: center;
}

.btn span {
  position: relative; 
  z-index: 1;
}
.btn:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 2.25rem;
    height: 100%;
    border-right: 1px solid #000000;
    padding:119px;
}
.btn:before {
    content: url(https://.com/wp-content/uploads/2021/06/.png);
    position: absolute;
    top: 0%;
    left: -11.25rem;
    width: 0rem;
    height: 73%;
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

.btn:after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  height: 858%;
  width:347%;
  background: #ffae25;
  opacity:.3;
  -webkit-transition: all .5s ease-in-out;
  transition: all .5s ease-in-out;
  -webkit-transform: translateX(-98%) translateY(-25%) rotate(37deg);
  transform: translateX(-98%) translateY(-25%) rotate(47deg);
}

.btn:hover:after {
    -webkit-transform: translateX(-9%) translateY(-25%) rotate(47deg);
  transform: translateX(-9%) translateY(-25%) rotate(45deg);
  z-index:1;

}

.link {
  font-size: 20px;
  margin-top: 30px;
}

.btn > a {
  color: #000;
  font-size: 25px; 
}
<div class="button_cotainer">
    <div class="btn"><a href="#">button1</a></div>
    <div class="btn"><a href="#">button2</a></div>
    <div class="btn"><a href="#">button3</a></div>
    <div class="btn"><a href="#">button4</a></div>
<div>

Answered By – Crystal

Answer Checked By – Clifford M. (AngularFixing Volunteer)

Leave a Reply

Your email address will not be published.