Should a group of buttons be placed in a list?

HTML & CSS
1

Is a list needed or necessary here?
https://jsfiddle.net/4mrv1u8o/2/

.container {
  position: relative;
  width: 582px;
  height: 717px;
  background: red;
}

.playButton {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  margin: 0;
  width: 150px;
  height: 195px;
  box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.2), 0 0 1px 2px black, inset 0 2px 2px -2px white, inset 0 0 2px 15px #47434c, inset 0 0 2px 22px black;
  border-radius: 5px;
  padding: 20px;
  perspective: 700px;
}

.playButton .nav {
  margin: 0;
  padding: 0;
  list-style: none;
}

.playButton .nav li {
  margin: 0;
  padding: 0;
}

.playButton .nav li {
  width: 150px;
  height: 195px;
  margin: 0;
}

<div class="container">
  <ul class="nav">
    <li>
      <div class="playButton" style="margin:2px 2px;" data-audio="http://getradio.me/svoefm">
        <div class="button">
          <div class="light"></div>
          <div class="dots"></div>
          <div class="characters"></div>
          <div class="shine"></div>
          <div class="shadow"></div>
        </div>
      </div>
    </li>
    <li>
      <div class="playButton" style="margin: 2px 2px 0 196px;" data-audio="ttp:/fm1.hostingradio.ru:14536/rock90.mp3">
        <div class="button">
          <div class="light"></div>
          <div class="dots"></div>
          <div class="characters"></div>
          <div class="shine"></div>
          <div class="shadow"></div>
        </div>
      </div>
    </li>
    <li>
      <div class="playButton" style="margin: 2px 0 0 390px;" data-audio="http:/fm1.hostingradio.ru:14536/rock90.mp3">
        <div class="button">
          <div class="light"></div>
          <div class="dots"></div>
          <div class="characters"></div>
          <div class="shine"></div>
          <div class="shadow"></div>
        </div>
      </div>
    </li>
    <li>
      <div class="playButton" style="margin:241px 0 0 2px;" data-audio="http:/fm1.hostingradio.ru:14536/rock90.mp3">
        <div class="button">
          <div class="light"></div>
          <div class="dots"></div>
          <div class="characters"></div>
          <div class="shine"></div>
          <div class="shadow"></div>
        </div>
      </div>
    </li>
    <li>
      <div class="playButton" style="margin:241px 0 0 196px;" data-audio="http:/fm1.hostingradio.ru:14536/rock90.mp3">
        <div class="button">
          <div class="light"></div>
          <div class="dots"></div>
          <div class="characters"></div>
          <div class="shine"></div>
          <div class="shadow"></div>
        </div>
      </div>
    </li>
    <li>
      <div class="playButton" style="margin:241px 0 0 196px;" data-audio="http:/fm1.hostingradio.ru:14536/rock90.mp3">
        <div class="button">
          <div class="light"></div>
          <div class="dots"></div>
          <div class="characters"></div>
          <div class="shine"></div>
          <div class="shadow"></div>
        </div>
      </div>
    </li>
    <li>
      <div class="playButton" style="margin:241px 0 0 390px;" data-audio="http:/fm1.hostingradio.ru:14536/rock90.mp3">
        <div class="button">
          <div class="light"></div>
          <div class="dots"></div>
          <div class="characters"></div>
          <div class="shine"></div>
          <div class="shadow"></div>
        </div>
      </div>
    </li>
    <li>
      <div class="playButton" style="margin:480px 2px 0;" data-audio="http:/fm1.hostingradio.ru:14536/rock90.mp3">
        <div class="button">
          <div class="light"></div>
          <div class="dots"></div>
          <div class="characters"></div>
          <div class="shine"></div>
          <div class="shadow"></div>
        </div>
      </div>
    </li>
    <li>
      <div class="playButton" style="margin:480px 2px 0 196px;" data-audio="http:/fm1.hostingradio.ru:14536/rock90.mp3">
        <div class="button">
          <div class="light"></div>
          <div class="dots"></div>
          <div class="characters"></div>
          <div class="shine"></div>
          <div class="shadow"></div>
        </div>
      </div>
    </li>
    <li>
      <div class="playButton" style="margin:480px 2px 0 390px;" data-audio="http:/fm1.hostingradio.ru:14536/rock90.mp3">
        <div class="button">
          <div class="light"></div>
          <div class="dots"></div>
          <div class="characters"></div>
          <div class="shine"></div>
          <div class="shadow"></div>
        </div>
      </div>
    </li>
  </ul>
</div>
2

It certainly looks like a list of buttons so a list is a good way to organise them. You can often debate the semantics of lists but generally if you have a list of similar things then it’s a good bet a list will be suitable.

However you don’t need the play button div as those classes can be on the list element instead. No need for two wrappers.

3

What do you mean?

When you said this:

you don’t need the play button div as those classes can be on the list element instead. No need for two wrappers.

4

Exactly what I said. The list element can replace the play button div.

 <li class="playButton" style="margin: 2px 2px 0 196px;" data-audio="ttp:/fm1.hostingradio.ru:14536/rock90.mp3">
        <div class="button">
          <div class="light"></div>
          <div class="dots"></div>
          <div class="characters"></div>
          <div class="shine"></div>
          <div class="shadow"></div>
        </div>
    </li>
1 Like
5

Like this?

How do I remove the dots?

What would get changed in the css?

https://jsfiddle.net/4xejwo82/2/

css

Are any of these needed or necessary?

.playButton .nav {
  margin: 0;
  padding: 0;
  list-style: none;
}

.playButton .nav li {
  margin: 0;
  padding: 0;
}

.playButton .nav li {
  width: 150px;
  height: 195px;
  margin: 0;
}

Html


<div class="container">
  <ul class="nav">
    <li class="playButton" style="margin:2px 2px;" data-audio="http://getradio.me/svoefm">
      <div class="button">
        <div class="light"></div>
        <div class="dots"></div>
        <div class="characters"></div>
        <div class="shine"></div>
        <div class="shadow"></div>
      </div>
    </li>
    <li class="playButton" style="margin: 2px 2px 0 196px;" data-audio="http:/fm1.hostingradio.ru:14536/rock90.mp3">
      <div class="button">
        <div class="light"></div>
        <div class="dots"></div>
        <div class="characters"></div>
        <div class="shine"></div>
        <div class="shadow"></div>
      </div>
    </li>
    <li class="playButton" style="margin: 2px 0 0 390px;" data-audio="">
      <div class="button">
        <div class="light"></div>
        <div class="dots"></div>
        <div class="characters"></div>
        <div class="shine"></div>
        <div class="shadow"></div>
      </div>
    </li>
    <li class="playButton" style="margin:241px 0 0 2px;" data-audio="">
      <div class="button">
        <div class="light"></div>
        <div class="dots"></div>
        <div class="characters"></div>
        <div class="shine"></div>
        <div class="shadow"></div>
      </div>
    </li>
    <li class="playButton" style="margin:241px 0 0 196px;" data-audio="">
      <div class="button">
        <div class="light"></div>
        <div class="dots"></div>
        <div class="characters"></div>
        <div class="shine"></div>
        <div class="shadow"></div>
      </div>
    </li>
    <li class="playButton" style="margin:241px 0 0 196px;" data-audio="">
      <div class="button">
        <div class="light"></div>
        <div class="dots"></div>
        <div class="characters"></div>
        <div class="shine"></div>
        <div class="shadow"></div>
      </div>
    </li>
    <li class="playButton" style="margin:241px 0 0 390px;" data-audio="">
      <div class="button">
        <div class="light"></div>
        <div class="dots"></div>
        <div class="characters"></div>
        <div class="shine"></div>
        <div class="shadow"></div>
      </div>
    </li>
    <li class="playButton" style="margin:480px 2px 0;" data-audio="">
      <div class="button">
        <div class="light"></div>
        <div class="dots"></div>
        <div class="characters"></div>
        <div class="shine"></div>
        <div class="shadow"></div>
      </div>
    </li>
    <li class="playButton" style="margin:480px 2px 0 196px;" data-audio="">
      <div class="button">
        <div class="light"></div>
        <div class="dots"></div>
        <div class="characters"></div>
        <div class="shine"></div>
        <div class="shadow"></div>
      </div>
    </li>
    <li class="playButton" style="margin:480px 2px 0 390px;" data-audio="">
      <div class="button">
        <div class="light"></div>
        <div class="dots"></div>
        <div class="characters"></div>
        <div class="shine"></div>
        <div class="shadow"></div>
      </div>
    </li>
  </ul>
</div>
6

As written, they aren’t doing anything.

Think about the HTML boxes (outer to inner) and how the CSS should be written to target the target :groan:

EDIT:

.nav is assigned to the <ul>,
.playButton is assigned to a <li>
therefore, delete .playButton from in front of its <ul>

.playButton .nav {
  margin: 0;
  padding: 0;
  list-style: none;
}

something like this

.nav {
  list-style: none;
  padding: 0;
  margin: 0;
}

That should remove the list item dots.

The latter two items seem like thoughtless copy-n-paste leftovers.

.playButton .nav li {
  margin: 0;
  padding: 0;
}

.playButton .nav li {
  width: 150px;
  height: 195px;
  margin: 0;
}

They seem to work best when deleted.

2 Likes
7

Should .nav be on playButton?
https://jsfiddle.net/a7t6hbv4/

 .nav  {
  list-style: none;
  padding: 0;
  margin: 0;
}

 .nav .playButton {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  margin: 0;
  background: black;
  width: 150px;
  height: 195px;
  box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.2), 0 0 1px 2px black, inset 0 2px 2px -2px white, inset 0 0 2px 15px #47434c, inset 0 0 2px 22px black;
  border-radius: 5px;
  padding: 20px;
  perspective: 700px;
}


 .nav .playButton.active .button {
  transform: translateZ(20px) rotateX(25deg);
  box-shadow: 0 -10px 20px #ff1818;
}

 .nav .playButton.active .button .light {
  animation: flicker 0.2s infinite 0.3s;
}

 .nav .playButton.active .button .shine {
  opacity: 1;
}

 .nav .playButton.active .button .shadow {
  opacity: 0;
}

 .nav .playButton .button {
  transition: all 0.3s cubic-bezier(1, 0, 1, 1);
  transform-origin: center center -20px;
  transform: translateZ(20px) rotateX(-25deg);
  transform-style: preserve-3d;
  background-color: #9b0621;
  width: 100%;
  height: 100%;
  position: relative;
  cursor: pointer;
  background: linear-gradient(#980000 0%, #6f0000 30%, #6f0000 70%, #980000 100%);
  background-repeat: no-repeat;
}


 .nav .playButton .button::before {
  content: "";
  background: linear-gradient(rgba(255, 255, 255, 0.8) 10%, rgba(255, 255, 255, 0.3) 30%, #650000 75%, #320000) 50% 50%/97% 97%, #b10000;
  background-repeat: no-repeat;
  width: 100%;
  height: 50px;
  transform-origin: top;
  transform: rotateX(-90deg);
  position: absolute;
  top: 0;
}

 .nav .playButton .button::after {
  content: "";
  background-image: linear-gradient(#650000, #320000);
  width: 100%;
  height: 50px;
  transform-origin: top;
  transform: translateY(50px) rotateX(-90deg);
  position: absolute;
  bottom: 0;
  box-shadow: 0 50px 8px 0px black, 0 80px 20px 0px rgba(0, 0, 0, 0.5);
}

 .nav .playButton .light {
  opacity: 0;
  animation: light-off 1s;
  position: absolute;
  width: 100%;
  height: 100%;
  background-image: radial-gradient(#ffc97e, #ff1818 40%, transparent 70%);
}

 .nav .playButton .dots {
  position: absolute;
  width: 100%;
  height: 100%;
  background-image: radial-gradient(transparent 30%, rgba(101, 0, 0, 0.7) 70%);
  background-size: 10px 10px;
}

 .nav .playButton .characters {
  position: absolute;
  width: 100%;
  height: 100%;
  background: linear-gradient(white, white) 50% 20%/5% 20%, radial-gradient(circle, transparent 50%, white 52%, white 70%, transparent 72%) 50% 80%/33% 25%;
  background-repeat: no-repeat;
}

 .nav .playButton .shine {
  transition: all 0.3s cubic-bezier(1, 0, 1, 1);
  opacity: 0.3;
  position: absolute;
  width: 100%;
  height: 100%;
  background: linear-gradient(white, transparent 3%) 50% 50%/97% 97%, linear-gradient(rgba(255, 255, 255, 0.5), transparent 50%, transparent 80%, rgba(255, 255, 255, 0.5)) 50% 50%/97% 97%;
  background-repeat: no-repeat;
}

 .nav .playButton .shadow {
  transition: all 0.3s cubic-bezier(1, 0, 1, 1);
  opacity: 1;
  position: absolute;
  width: 100%;
  height: 100%;
  background: linear-gradient(transparent 70%, rgba(0, 0, 0, 0.8));
  background-repeat: no-repeat;
}
8

Your fiddle isn’t loading but looking at the css the only element there that needs .nav is .nav itself. It looks redundant on all the others.

You should keep your descendant selectors as short as possible (or as short as needed). Don’t just chain whole long lists of selectors when you don’t need to.

Otherwise you end up with ‘contrived’ nonsense like this:

html body .outer .inner .tcell .jacket .nav .playButton .button {background:red}

when all you needed was :slight_smile:
.button{background:red}

9

jsfiddle was down, it’s back up now.

Then this is good:
https://jsfiddle.net/8k375ujd/1/

.container {
  position: relative;
  width: 582px;
  height: 717px;
  background: red;
}

.nav {
  list-style: none;
  padding: 0;
  margin: 0;
}

.playButton {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  margin: 0;
  background: black;
  width: 150px;
  height: 195px;
  box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.2), 0 0 1px 2px black, inset 0 2px 2px -2px white, inset 0 0 2px 15px #47434c, inset 0 0 2px 22px black;
  border-radius: 5px;
  padding: 20px;
  perspective: 700px;
}
10

Yes that looks better.

Also note that you have some rules like this with 2 descendants.

.playButton.active .button .shine {}

The button class is not needed there unless you had a shine class in other contexts.

e.g. just use.

.playButton.active .shine {}

Obviously you need the .active in front but the .playButton class could also be superfluous here.

In essence you only need this.

.container {
  position: relative;
  width: 582px;
  height: 717px;
  background: red;
}

.nav {
  list-style: none;
  padding: 0;
  margin: 0;
}

.playButton {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  margin: 0;
  background: black;
  width: 150px;
  height: 195px;
  box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.2), 0 0 1px 2px black, inset 0 2px 2px -2px white, inset 0 0 2px 15px #47434c, inset 0 0 2px 22px black;
  border-radius: 5px;
  padding: 20px;
  perspective: 700px;
}

.active .button {
  transform: translateZ(20px) rotateX(25deg);
  box-shadow: 0 -10px 20px #ff1818;
}

.active .light {
  animation: flicker 0.2s infinite 0.3s;
}

.active .shine {
  opacity: 1;
}

.active .shadow {
  opacity: 0;
}

.button {
  transition: all 0.3s cubic-bezier(1, 0, 1, 1);
  transform-origin: center center -20px;
  transform: translateZ(20px) rotateX(-25deg);
  transform-style: preserve-3d;
  background-color: #9b0621;
  width: 100%;
  height: 100%;
  position: relative;
  cursor: pointer;
  background: linear-gradient(#980000 0%, #6f0000 30%, #6f0000 70%, #980000 100%);
  background-repeat: no-repeat;
}

.button::before {
  content: "";
  background: linear-gradient(rgba(255, 255, 255, 0.8) 10%, rgba(255, 255, 255, 0.3) 30%, #650000 75%, #320000) 50% 50%/97% 97%, #b10000;
  background-repeat: no-repeat;
  width: 100%;
  height: 50px;
  transform-origin: top;
  transform: rotateX(-90deg);
  position: absolute;
  top: 0;
}

.button::after {
  content: "";
  background-image: linear-gradient(#650000, #320000);
  width: 100%;
  height: 50px;
  transform-origin: top;
  transform: translateY(50px) rotateX(-90deg);
  position: absolute;
  bottom: 0;
  box-shadow: 0 50px 8px 0px black, 0 80px 20px 0px rgba(0, 0, 0, 0.5);
}

.light {
  opacity: 0;
  animation: light-off 1s;
  position: absolute;
  width: 100%;
  height: 100%;
  background-image: radial-gradient(#ffc97e, #ff1818 40%, transparent 70%);
}

.dots {
  position: absolute;
  width: 100%;
  height: 100%;
  background-image: radial-gradient(transparent 30%, rgba(101, 0, 0, 0.7) 70%);
  background-size: 10px 10px;
}

.characters {
  position: absolute;
  width: 100%;
  height: 100%;
  background: linear-gradient(white, white) 50% 20%/5% 20%, radial-gradient(circle, transparent 50%, white 52%, white 70%, transparent 72%) 50% 80%/33% 25%;
  background-repeat: no-repeat;
}

.shine {
  transition: all 0.3s cubic-bezier(1, 0, 1, 1);
  opacity: 0.3;
  position: absolute;
  width: 100%;
  height: 100%;
  background: linear-gradient(white, transparent 3%) 50% 50%/97% 97%, linear-gradient(rgba(255, 255, 255, 0.5), transparent 50%, transparent 80%, rgba(255, 255, 255, 0.5)) 50% 50%/97% 97%;
  background-repeat: no-repeat;
}

.shadow {
  transition: all 0.3s cubic-bezier(1, 0, 1, 1);
  opacity: 1;
  position: absolute;
  width: 100%;
  height: 100%;
  background: linear-gradient(transparent 70%, rgba(0, 0, 0, 0.8));
  background-repeat: no-repeat;
}

@keyframes flicker {
  0% {
    opacity: 1;
  }

  80% {
    opacity: 0.8;
  }

  100% {
    opacity: 1;
  }
}

@keyframes light-off {
  0% {
    opacity: 1;
  }

  80% {
    opacity: 0;
  }
}

However some times its easier to remember where the rule is if you say .playButton .shine but on a small demo like yours then its hardly worth it and only complicates the css when you can get away with .shine.

2 Likes
11

Doing as you suggested broke the code.

https://jsfiddle.net/xwqscm79/1/

12

No that is broken from you NOT Doing what I said.

Half the code is missing in your example!

I posted this:

.container {
  position: relative;
  width: 582px;
  height: 717px;
  background: red;
}

.nav {
  list-style: none;
  padding: 0;
  margin: 0;
}

.playButton {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  margin: 0;
  background: black;
  width: 150px;
  height: 195px;
  box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.2), 0 0 1px 2px black, inset 0 2px 2px -2px white, inset 0 0 2px 15px #47434c, inset 0 0 2px 22px black;
  border-radius: 5px;
  padding: 20px;
  perspective: 700px;
}

.active .button {
  transform: translateZ(20px) rotateX(25deg);
  box-shadow: 0 -10px 20px #ff1818;
}

.active .light {
  animation: flicker 0.2s infinite 0.3s;
}

.active .shine {
  opacity: 1;
}

.active .shadow {
  opacity: 0;
}

.button {
  transition: all 0.3s cubic-bezier(1, 0, 1, 1);
  transform-origin: center center -20px;
  transform: translateZ(20px) rotateX(-25deg);
  transform-style: preserve-3d;
  background-color: #9b0621;
  width: 100%;
  height: 100%;
  position: relative;
  cursor: pointer;
  background: linear-gradient(#980000 0%, #6f0000 30%, #6f0000 70%, #980000 100%);
  background-repeat: no-repeat;
}

.button::before {
  content: "";
  background: linear-gradient(rgba(255, 255, 255, 0.8) 10%, rgba(255, 255, 255, 0.3) 30%, #650000 75%, #320000) 50% 50%/97% 97%, #b10000;
  background-repeat: no-repeat;
  width: 100%;
  height: 50px;
  transform-origin: top;
  transform: rotateX(-90deg);
  position: absolute;
  top: 0;
}

.button::after {
  content: "";
  background-image: linear-gradient(#650000, #320000);
  width: 100%;
  height: 50px;
  transform-origin: top;
  transform: translateY(50px) rotateX(-90deg);
  position: absolute;
  bottom: 0;
  box-shadow: 0 50px 8px 0px black, 0 80px 20px 0px rgba(0, 0, 0, 0.5);
}

.light {
  opacity: 0;
  animation: light-off 1s;
  position: absolute;
  width: 100%;
  height: 100%;
  background-image: radial-gradient(#ffc97e, #ff1818 40%, transparent 70%);
}

.dots {
  position: absolute;
  width: 100%;
  height: 100%;
  background-image: radial-gradient(transparent 30%, rgba(101, 0, 0, 0.7) 70%);
  background-size: 10px 10px;
}

.characters {
  position: absolute;
  width: 100%;
  height: 100%;
  background: linear-gradient(white, white) 50% 20%/5% 20%, radial-gradient(circle, transparent 50%, white 52%, white 70%, transparent 72%) 50% 80%/33% 25%;
  background-repeat: no-repeat;
}

.shine {
  transition: all 0.3s cubic-bezier(1, 0, 1, 1);
  opacity: 0.3;
  position: absolute;
  width: 100%;
  height: 100%;
  background: linear-gradient(white, transparent 3%) 50% 50%/97% 97%, linear-gradient(rgba(255, 255, 255, 0.5), transparent 50%, transparent 80%, rgba(255, 255, 255, 0.5)) 50% 50%/97% 97%;
  background-repeat: no-repeat;
}

.shadow {
  transition: all 0.3s cubic-bezier(1, 0, 1, 1);
  opacity: 1;
  position: absolute;
  width: 100%;
  height: 100%;
  background: linear-gradient(transparent 70%, rgba(0, 0, 0, 0.8));
  background-repeat: no-repeat;
}

@keyframes flicker {
  0% {
    opacity: 1;
  }

  80% {
    opacity: 0.8;
  }

  100% {
    opacity: 1;
  }
}

@keyframes light-off {
  0% {
    opacity: 1;
  }

  80% {
    opacity: 0;
  }
}
2 Likes
13

When I copied and pasted it must have not got everything.

I retract previous comment saying you were wrong when it was me who messed up.

Fixed
https://jsfiddle.net/qLabup9g/1/

1 Like
16

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.