How to create 1 unique play button

If I wanted one of the play buttons to be green, and all the others blue, how would I do that in the code?

https://jsfiddle.net/5w6b3avc/

Add a class to the one you want to change and then change the border-color (and whatever else needs to be changed).

e.g.

.embed-youtube .embed-youtube-play.playgreen{
  border-color:green
}
.embed-youtube-play.playgreen::before {
  border-left-color:green; 
}
<button class="playa playgreen  embed-youtube-play" type="button" aria-label="Open"></button>

Which gives this result:

1 Like

How come when I click on the button it’s not disappearing? https://jsfiddle.net/n0sxdj2c/7/

I tried this:


.embed-youtube.active .embed-youtube-play .playgreen{
  display: none;
}

I got it.

Fixed: https://jsfiddle.net/7hdy1pg3/

.embed-youtube .embed-youtube-play.playgreen {
  animation: rotate 700ms linear forwards;
  animation-iteration-count: 4;
  border-color: red transparent red transparent;
}

.embed-youtube-play.playgreen::before {
  content: "";
  width: 0;
  height: 0;
  border-top: 20px solid transparent;
  border-bottom: 20px solid transparent;
  border-left: 27px solid;
  transform: translateX(4px);
  animation: triangle 700ms linear forwards;
  animation-iteration-count: 4;
}

@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }

  99.9% {
    border-color: red transparent red transparent;
    pointer-events: none;
  }

  100% {
    transform: rotate(360deg);
    border-color: green;
  }
}

@keyframes triangle {
  0% {
    opacity: 0;
  }

  99.9% {
    opacity: 0;
  }

  100% {
    border-left-color: green;
    opacity: 1;
  }
}

You didn’t add the code I gave you properly and you added a load of other stuff instead. You also have keyframe animations changing the color so you need to address those also. I deleted the code you added and added the code at the end of the css. It must not be mixed in with the original because it is an over-ride.

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}


body {
  background: #302b63;
}

.container2  {
  display: none;
}

.bg1 .container2  {
  display: flex;
}

.container1 {
  position: absolute;
  left: 0;
  right: 0;
  min-height: 100%;
  min-width: 255px;
  display: flex;
  padding: 8px 8px;
}

.bg1 .container1  {
 display: none;
}

body.initial-fade {
  animation: initial-fade 1s ease forwards;
}

@keyframes initial-fade {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    pointer-events: none;
  }
}

body.bg1 {
  animation: bg1 5s ease 0s forwards;
}

@keyframes bg1 {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
    background: teal;
  }
}

.curtain1 {
  flex: 1 0 0;
  margin: auto;
  max-width: 640px;
  border: 21px solid;
  border-radius: 12px;
  border-color: #000 #101010 #000 #101010;
  position: relative;
}

.curtain1::before {
  content: '';
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  background: radial-gradient(circle, transparent 0% 35%, #0a0a0a 35%);

  border: 1px solid;
  border-color: #000 #101010 #000 #101010;
  ;
}

.curtain1::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  outline: 1px solid #f91f6e;
  pointer-events: none;
}

.curtain1.slide::after {
  outline: 1px solid #0059dd;
  transition: outline 2s ease-in;
  transition-delay: 8s;
  /*  add this */
  /*background-image: none;*/
}


.video-one {
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  transition: all 8s ease-in 0s;
  transition-delay: 1s;
  background: url("https://via.placeholder.com/640x360");
  background-position: 0 0;
  background-size: cover;
  background-repeat: no-repeat;
  z-index: 1;
  animation: fadeInImage 2s ease-in 2s forwards;
  opacity: 0;
}

@keyframes fadeInImage {
  to {
    opacity: 1;
  }
}
.curtain1.slide .video-one {
  transform: translateY(calc(-100% - 1px));

}





.curtain {
  margin: auto auto 20px;
  max-width: 640px;
  border: 21px solid;
  border-radius: 12px;
  border-color: #000 #101010 #000 #101010;
  position: relative;
}

@media screen and (max-width: 500px) {
  .curtain {
    margin-bottom: 10px;
  }
}

.curtain::before {
  content: '';
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  background: #0a0a0a;
  border: 1px solid;
  border-color: #000 #101010 #000 #101010;
}

.curtain::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  outline: 1px solid #333;
  pointer-events: none;
}

.curtain.slide::after {
  outline: 1px solid #0059dd;
  transition: outline 2s ease-in;
}

.ratio-keeper {
  position: relative;
  height: 0;
  padding-top: 56.25%;
  margin: auto;
  overflow: hidden;
}

.fence {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  background-image: linear-gradient(45deg,
      transparent,
      transparent 7px,
      rgb(113, 121, 126) 7px,
      rgb(113, 121, 126) 7.5px,
      transparent 7.5px,
      transparent 10px),
    linear-gradient(-45deg,
      transparent,
      transparent 7px,
      rgb(113, 121, 126) 7px,
      rgb(113, 121, 126) 7.5px,
      transparent 7.5px,
      transparent 10px);
  background-size: 10px 10px;
  filter: drop-shadow(0 0 5px #000);
  clip-path: circle(25% at center);

}

.fence>div {
  position: absolute;
  /*top: 0;*/
  left: 0;
  right: 0;
  /*width: 100%;*/
  height: 0.55%;
  /*height: 2px;*/
  background: green;

}

.fence>div:nth-child(1) {
  top: 10%;
}

.fence>div:nth-child(2) {
  top: 20%;
}

.fence>div:nth-child(3) {
  top: 30%;
}

.fence>div:nth-child(4) {
  top: 40%;
}

.fence>div:nth-child(5) {
  top: 50%;
}

.fence>div:nth-child(6) {
  top: 60%;
}

.fence>div:nth-child(7) {
  top: 70%;
}

.fence>div:nth-child(8) {
  top: 80%;
}

.fence>div:nth-child(9) {
  top: 90%;
}

.fan svg {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 70%;
  height: 70%;
  margin: auto;
}

.cross::before,
.cross::after {
  content: "";
  background: black;
}

.cross::before {
  /*horizontal*/
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  /*width: 100%;*/
  /*height: 10px;*/
  height: 2.8%;
  clip-path: circle(29% at center);
}

.cross::after {
  /*vertical*/
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  /*width: 10px;*/
  width: 1.5%;
  /*height: 100%;*/
  clip-path: circle(51% at center);
}

.video-two {
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  transition: all 8s ease-in 0s;
  transition-delay: 300ms;
  background: url("https://via.placeholder.com/640x360");
  background-position: 0 0;
  background-size: cover;
  background-repeat: no-repeat;
  z-index: 1;
}

.curtain.slide .video-two {
  transform: translateY(-100%);


}

.video-three {
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  transition: all 8s ease-in 0s;
  transition-delay: 300ms;
  background: url("https://via.placeholder.com/640x360");
  background-position: 0 0;
  background-size: cover;
  background-repeat: no-repeat;
  z-index: 1;
}

.curtain.slide .video-three {
  transform: translateY(-100%);

}

.video-four {
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  transition: all 8s ease-in 0s;
  transition-delay: 300ms;
  background: url("https://via.placeholder.com/640x360");
  background-position: 0 0;
  background-size: cover;
  background-repeat: no-repeat;
  z-index: 1;
}

.curtain.slide .video-four {
  transform: translateY(-100%);


}

.video-five {
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  transition: all 8s ease-in 0s;
  transition-delay: 300ms;
  background: url("https://via.placeholder.com/640x360");
  background-position: 0 0;
  background-size: cover;
  background-repeat: no-repeat;
  z-index: 1;
}

.curtain.slide .video-five {
  transform: translateY(-100%);
}

.video-six {
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  transition: all 8s ease-in 0s;
  transition-delay: 300ms;
  background: url("https://via.placeholder.com/640x360");
  background-position: 0 0;
  background-size: cover;
  background-repeat: no-repeat;
  z-index: 1;
}

.curtain.slide .video-six {
  transform: translateY(-100%);
}

iframe {
  display: block;
  animation: iframe 10s ease forwards;
  animation-delay: 7.5s;
  opacity: 0;
}

@keyframes iframe {
  to {
    opacity: 1;
  }
}

.embed-youtube iframe,
.embed-youtube .embed-youtube-play,
.embed-youtube .embed-youtube-play::before {
  position: absolute;
}

.embed-youtube iframe {
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
}


/*
.embed-youtube .embed-youtube-play {
  -webkit-appearance: none;
  appearance: none;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 90px;
  height: 90px;
  border-radius: 50%;
  cursor: pointer;
  border: 9px solid;
  background: transparent;
  filter: drop-shadow(3px 3px 3px #000000b3);
  animation: rotate 700ms linear forwards;
  border-color: red transparent red transparent;
  filter: drop-shadow(3px 3px 3px rgba(0, 0, 0, 0.7));
  color: #303030;
}

@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }

  99.9% {
    border-color: red transparent red transparent;
    pointer-events: none;
  }

  100% {
    transform: rotate(360deg);
    border-color: blue;
  }
}

.embed-youtube .embed-youtube-play::before {
  content: "";
  width: 0;
  height: 0;
  border-top: 20px solid transparent;
  border-bottom: 20px solid transparent;
  border-left: 27px solid;
  transform: translateX(4px);
  animation: triangle 700ms linear forwards;
}

@keyframes triangle {
  0% {
    opacity: 0;
  }

  99.9% {
    opacity: 0;
  }

  100% {
    border-left-color: blue;
    opacity: 1;
  }
}*/



.embed-youtube .embed-youtube-play {
  -webkit-appearance: none;
  appearance: none;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 90px;
  height: 90px;
  border-radius: 50%;
  cursor: pointer;
  border: 9px solid blue;
  background: transparent;
  filter: drop-shadow(3px 3px 3px #000000b3);
  z-index: 1;
}

.embed-youtube-play::before {
  content: "";
  width: 0;
  height: 0;
  border-top: 20px solid transparent;
  border-bottom: 20px solid transparent;
  border-left: 27px solid blue;
  transform: translateX(4px);
}

.embed-youtube-play:hover {
  box-shadow: 0 0 0 5px rgba(43, 179, 20, 0.5);
}

.embed-youtube-play:focus {
  outline: 0;
  box-shadow: 0 0 0 5px rgba(0, 255, 255, 0.5);
}
.embed-youtube.active .embed-youtube-play {
  display: none;
}

@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }

  99.9% {
    border-color: red transparent red transparent;
    pointer-events: none;
  }

  100% {
    transform: rotate(360deg);
    border-color: blue;
  }
}

@keyframes triangle {
  0% {
    opacity: 0;
  }

  99.9% {
    opacity: 0;
  }

  100% {
    border-left-color: blue;
    opacity: 1;
  }
}








.container {
  position: absolute;
  left: 0;
  right: 0;
  min-height: 100%;
  padding: 8px 8px;
}



.exit {
  position: absolute;
  top: auto;
  bottom: -47.63px;
  margin: auto;
  right: 0;
  left: 0;
  width: 47px;
  height: 47px;
  cursor: pointer;
  border-radius: 100%;
  background: transparent;
  border: 5px solid red;
  box-sizing: border-box;
 /* opacity: 0;
    pointer-events: none;*/
  clip-path: circle(50%);
}
.slide .exit {
 /* animation: fadeInExit 4s  forwards 10s;*/
}


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

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


.exit::before,
.exit::after {
  content: "";
  background-color: red;
  width: 47px;
  height: 5px;
  position: absolute;
  top: 0px;
  left: -5px;
  right: 0;
  bottom: 0;
  margin: auto;
}

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

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

.hide {
  display: none;
}

.embed-youtube .embed-youtube-play.playgreen{
  border-color:green;
   animation: rotate2 700ms linear forwards;
}
.embed-youtube-play.playgreen::before {
  border-left-color:green; 
  animation: triangle2 700ms linear forwards;
}
@keyframes triangle2 {
  0% {
    opacity: 0;
  }

  99.9% {
    opacity: 0;
  }

  100% {
    border-left-color: green;
    opacity: 1;
  }
}
@keyframes rotate2 {
  0% {
    transform: rotate(0deg);
  }

  99.9% {
    border-color: red transparent red transparent;
    pointer-events: none;
  }

  100% {
    transform: rotate(360deg);
    border-color: green;
  }
}

I’m all confused.

How do I get your code to be the same as this? https://jsfiddle.net/7hdy1pg3/

This is what I had:

.embed-youtube .embed-youtube-play.playgreen {
  animation: rotate 700ms linear forwards;
  animation-iteration-count: 4;
  border-color: red transparent red transparent;
}

.embed-youtube-play.playgreen::before {
  content: "";
  width: 0;
  height: 0;
  border-top: 20px solid transparent;
  border-bottom: 20px solid transparent;
  border-left: 27px solid;
  transform: translateX(4px);
  animation: triangle 700ms linear forwards;
  animation-iteration-count: 4;
}

@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }

  99.9% {
    border-color: red transparent red transparent;
    pointer-events: none;
  }

  100% {
    transform: rotate(360deg);
    border-color: green;
  }
}

@keyframes triangle {
  0% {
    opacity: 0;
  }

  99.9% {
    opacity: 0;
  }

  100% {
    border-left-color: green;
    opacity: 1;
  }
}

Both don’t look the same visually.

What would be added or removed in your code?

This is yours: https://jsfiddle.net/8gsd4pmz/

.embed-youtube .embed-youtube-play.playgreen{
  border-color:green;
   animation: rotate2 700ms linear forwards;
}
.embed-youtube-play.playgreen::before {
  border-left-color:green; 
  animation: triangle2 700ms linear forwards;
}
@keyframes triangle2 {
  0% {
    opacity: 0;
  }

  99.9% {
    opacity: 0;
  }

  100% {
    border-left-color: green;
    opacity: 1;
  }
}
@keyframes rotate2 {
  0% {
    transform: rotate(0deg);
  }

  99.9% {
    border-color: red transparent red transparent;
    pointer-events: none;
  }

  100% {
    transform: rotate(360deg);
    border-color: green;
  }
}

You only need to add the differences,

Why do you keep doing things like this?

.embed-youtube-play.playgreen::before {
  content: "";
  width: 0;
  height: 0;
  border-top: 20px solid transparent;
  border-bottom: 20px solid transparent;
  border-left: 27px solid;
}

The only change was the border-color!

e.g.

.embed-youtube-play.playgreen::before {
  border-left-color:green; 
}

If you are adding new animations then you can add the new animation code as required.You can’t modify an existing keyframe animation because the colors are in the keyframes so create new ones if needed.

Now I have this: https://jsfiddle.net/0tdows2j/1/

.embed-youtube .embed-youtube-play.playgreen{
   border-color: green;
   animation: rotate2 700ms linear forwards;
   animation-iteration-count: 4;
}
.embed-youtube-play.playgreen::before {
  border-left-color:green;
  animation: triangle2 700ms linear forwards;
  animation-iteration-count: 4;
}

@keyframes triangle2 {
  0% {
    opacity: 0;
  }

  99.9% {
    opacity: 0;
  }

  100% {
    border-left-color: green;
    opacity: 1;
  }
}

@keyframes rotate2 {
  0% {
    transform: rotate(0deg);
  }

  99.9% {
    border-color: red transparent red transparent;
    pointer-events: none;
  }

  100% {
    transform: rotate(360deg);
    border-color: green;
  }
}

Visually, it’s still not the same as what I originally had here: https://jsfiddle.net/7hdy1pg3/

This fixes it, but it’s telling me:

That line is a duplicate, but if I remove it, it goes back to looking the other way.

https://jsfiddle.net/ujgap581/1/

border-color: red transparent red transparent;


.embed-youtube .embed-youtube-play.playgreen{
   border-color: green;
   animation: rotate2 700ms linear forwards;
   animation-iteration-count: 4;
   border-color: red transparent red transparent;
}

If I remove that duplicate it goes back to this:

And

You can’t have 2 rules the same. Only one is applied.

Delete the first one as you are turning it to green in the key frame.

1 Like