Css media

How to Create 1 Unique Play Button – HTML & CSS – SitePoint Forums

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

https://jsfiddle.net/5w6b3avc/


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

for example

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

Which gives this result:



1 like

How come when I click the button it doesn’t disappear? https://jsfiddle.net/n0sxdj2c/7/

I tried this:


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

I understood.

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 correctly and added a whole bunch of other stuff instead. You also have keyframe animations that change the color, so you need to process those as well. I removed the code you added and added the code at the end of the css. It should not be mixed with the original as 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 can I get your code to be the same as this? https://jsfiddle.net/7hdy1pg3/

Here 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;
  }
}

The two are not visually alike.

What would be added or removed in your code?

It belongs to you: 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;
  }
}

Just 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!

for example

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

If you add new animations you can then add the new animation code if needed. You cannot edit 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 still not the same as what I originally had here: https://jsfiddle.net/7hdy1pg3/

This fixes the problem, but it tells me:

This line is a duplicate, but if I delete it, it starts looking the other way again.

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 comes down to this:

And

You cannot have 2 identical rules. Only one is applied.

Delete the first one as you turn it green in the keyframe.



1 like