Changing blue color to transparent

I added the extra b element because its a useful little non semantic tag but purists would say it should have been a span. I added it so that I could place the border on top of the X. It could be done without the extra b element if you put the border on the button instead but the problem is that the X will show a slight gap or overlap the circle slightly. It was much easier to make the X bigger than needed and then hide the edges under the b element.

I changed the 4th item in my codepen to not use the b element for comparison.

The X is just two pseudo elements that have a width and height and are rotated and placed into position.

.exitnew:before,
.exitnew:after {etc..}

Exactly how it is used normally!

When you hover the button you can change the button and any elements inside as required.

.exitnew:hover:before,
.exitnew:hover:after {
  background: green;
}

Nothing special there that’s just normal css.

The background seems to be blue in that demo. You said you wanted the X to turn green and the background to be transparent which is what my demo does.

1 Like

Like this.

The second one is the css version. the first one is your original svg

<button class="playa thePlay2" type="button" aria-label="Open"></button>

I just did it by eye so may need tweaking to be exact.

1 Like

Much better than my attempt. https://jsfiddle.net/m5o03pt7/

.play:before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    width: 80px;
    height: 80px;
    border: 5px solid #0059dd;
    background: #000000;
    border-radius: 100%;
}
.play:after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -25px 0 0 -15px;
    width: 0;
    height: 0;
    border-left: 40px solid #0059dd;
    border-top: 25px solid transparent;
    border-bottom: 25px solid transparent;
}

Is there a way adjust that so that changing the width and height doesn’t mess up the position of the X?

Is there a way to keep the lines in position?

https://jsfiddle.net/a0mfur9c/2/

Using a gradient, Would I be able to add a hover to the X here?

https://jsfiddle.net/b6vpdxzh/

The only thing working there is the fade.

.exitnew {
  -webkit-appearance: none;
  appearance: none;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  width: 48px;
  height: 48px;
  cursor: pointer;
  background:
    linear-gradient(green 0 0),
    linear-gradient(green 0 0) blue;
  background-size: 7px 100%, 100% 7px;
  background-position: center;
  background-repeat: no-repeat;
  border: 5px solid red;
  border-radius: 50%;
  transform: rotate(45deg);
}

Yes exactly as you would expect.:slight_smile:

.exit:hover {
  background-image:
    linear-gradient(red 0 0),
    linear-gradient(red 0 0);
}
1 Like

Just use percentages rather than a fixed position.

.exit2::before,
.exit2::after {
  top: 47%;
}
1 Like

How did you get the number 47% ?

What was the math?

Is it supposed to be a one size fits all widths/heights?

Top has more white than bottom here.

https://jsfiddle.net/23vbuy5h/

How is a transition added to the gradient? https://jsfiddle.net/shncy4zq/

.fadingOut .exit  {
    background-image:
    linear-gradient(red 0 0),
    linear-gradient(red 0 0);
}

You can’t. That’s why I used the pseudo classes and drew lines :slight_smile:

The only way to transition a gradient would be to use a pseudo class to create another gradient over the top and then change the opacity of the one on top t see the one below.

Like this:

.exit{
  -webkit-appearance: none;
  appearance: none;
  box-sizing: border-box;
  position: relative;
  margin: 0;
  padding: 0;
  width: 48px;
  height: 48px;
  cursor: pointer;
  background:
    linear-gradient(green 0 0),
    linear-gradient(green 0 0) blue;
  background-size: 7px 100%, 100% 7px;
  background-position: center;
  background-repeat: no-repeat;
  border: 5px solid red;
  border-radius: 50%;
  transform: rotate(45deg);
  animation: fadeInExit 2s forwards 0s;
  opacity: 0;
  pointer-events: none;
}

@keyframes fadeInExit {
  99% {
    pointer-events: none;
  }

  100% {
    pointer-events: initial;
    opacity: 1;
  }
}

.exit:before {
  content: "";
  position: absolute;
  left: -5px;
  top: -5px;
  right: -5px;
  bottom: -5px;
  background-image:
    linear-gradient(red 0 0),
    linear-gradient(red 0 0);
  transform: rotate(0deg);
  box-sizing: border-box;
  width: 48px;
  height: 48px;
  cursor: pointer;
  background-size: 7px 100%, 100% 7px;
  background-position: center;
  background-repeat: no-repeat;
  border: 5px solid red;
  border-radius: 50%;
  transition: 1s ease;
}

.exit:hover:before,
.fadingOut .exit:before {
  opacity: 0;
}

.fadingOut .exit {
  animation: fadeOutExit 5s forwards;
  pointer-events: none;
  opacity: 1;

}

@keyframes fadeOutExit {
  to {
    opacity: 0;
  }
}
1 Like

This way works well I find. https://jsfiddle.net/2uzo94q6/

And now width: 100%; can be removed.

.exitnew {
  -webkit-appearance: none;
  appearance: none;
  position: relative;
  margin: auto;
  width: 48px;
  height: 48px;
  cursor: pointer;
  border-radius: 50%;
  border: 5px solid red;
  background: transparent;
  transition: all 1s ease;
}

.exitnew::before,
.exitnew::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  width: 100%;
  height: 5px;
  background: red;
  transform: rotate(45deg);
  transition: all 1s ease;
}

.exitnew::after {
  transform: rotate(-45deg);
}

.exitnew:hover {
  background: transparent;
}

.exitnew:hover::before,
.exitnew:hover::after {
  background: green;
}

<button class="exitnew" type="button" aria-label="Close"></button>

Switching svg exit over to pure css.

For the X button to fade out on the hover color, how would this be fixed?

I left the svg stuff in the css to show how it was working before.

My guess was this, but that makes no sense.

.exit:hover::before.
.exit:hover::after
.fadingOut .exit:hover::before,
.exit:hover::after {
  background: green;
}

To test code, click the x button, then move the mouse off it.

It should not change back to red which was the original color.

https://jsfiddle.net/bfz7gxnd/

.exit {
  position: absolute;
  top: auto;
  /*bottom: -47px;*/
  /*margin: auto;*/
  right: 0;
  left: 0;
  width: 47px;
  height: 47px;
  cursor: pointer;
  background: black;
  border-radius: 50%;
  border: 5px solid red;
  animation: fadeInExit 1s forwards;
  opacity: 0;
  pointer-events: none;
}

.exit::before,
.exit::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  width: 100%;
  height: 5px;
  background: red;
  transform: rotate(45deg);
  transition: all 1s ease;
}

.exit::after {
  transform: rotate(-45deg);
}

.exit:hover::before,
.exit:hover::after {
  background: green;
}


@keyframes fadeInExit {
  99% {
    pointer-events: none;
  }

  100% {
    pointer-events: initial;
    opacity: 1;
  }
}

.exit svg {
  fill: red;
  transition: fill 3s ease;
}

.exit:hover svg,
.fadingOut .exit svg {
  fill: green;
}

.fadingOut .exit {
  animation: fadeOutExit 8s forwards;
  pointer-events: none;
  opacity: 1;
}

@keyframes fadeOutExit {
  to {
    opacity: 0;
  }
}

Doing this I was able to get it to fade out on green.

But then only 1 line is hoverable, meaning only 1 line changes from red to green on hover.

.exit:hover::before,
.exit:hover::after,
.fadingOut .exit::before,
.exit::after {
  background: green;
}

Do you want it to fade out on click?

If so:

.fadingOut .exit::before,
.fadingOut .exit::after {
  background: green;
}

Having a hover effect would be nonsense because it will change to green and then when you click it will just stay green. If that’s what you want then leave the hover effect in place as well.

.exit:hover::before,
.exit:hover::after,
.fadingOut .exit::before,
.fadingOut .exit::after {
  background: green;
}
1 Like

After changing over the svg to css play buttons, none of the buttons are clickable.

Nothing happens when they are clicked on.

css play buttons https://jsfiddle.net/8vah293b/

svg play buttons https://jsfiddle.net/gnabvyem/

Did I forget to do something or did I mess up somewhere?

Never mind.

I figured it out. https://jsfiddle.net/bzjm3qe2/

I forgot to delete this:

button.thePlay {
  pointer-events: none;
}
1 Like

I am having an issue.

CSS play not turning green after click.

This one is broken.
https://jsfiddle.net/rwqfdj13/

This

.played {
  fill: green;
}

Would be changed to what?

.cover {
  -webkit-appearance: none;
  appearance: none;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  width: 90px;
  height: 90px;
  border-radius: 50%;
  cursor: pointer;
  border: 9px solid blue;
  background: transparent;
  filter: drop-shadow(3px 3px 3px rgba(0, 0, 0, 0.7));
}
.cover::before {
  content: "";
  width: 0;
  height: 0;
  border-top: 20px solid transparent;
  border-bottom: 20px solid transparent;
  border-left: 27px solid blue;
  transform: translateX(4px);
}

.played {
  fill: green;
}

This works for the circle:

.played {
  border: 9px solid green;
}

What about for the triangle in the middle?

It would be written like this? https://jsfiddle.net/s9j2L1rw/

.played {
  border: 9px solid green;
}

.played::before{
  border-left: 27px solid green;
}

This would do.

.played{border-color:green;}
.played:before{border-left-color:green;}
1 Like