Accessing the button-container from the exit button inside it's container

HTML & CSS
23

Then go back to my last post and see what you missed out :slight_smile:

There are 3 things you should have done but you only did 2 of them!!

Itā€™s all in my post in black and white.

<span class="updated">Updated</span>

1 Like
24

Am I allowed to put an svg in here like this? https://jsfiddle.net/usfym8hg/1/

  <div class="button-container">

      <button class="exit exitPage3" type="button"><span class="p3"><svg viewBox="-100.9 99.1 61.9 105.9" width="14" height="14">
            <path d="M-98.2 158.8l43.5 43.5c1.7 1.7 4 2.7 6.5 2.7s4.8-1 6.5-2.7c1.7-1.7 2.7-4 2.7-6.5s-1-4.8-2.7-6.5l-37.2-37.2 37.2-37.2c1.7-1.7 2.7-4 2.7-6.5s-1-4.8-2.6-6.5c-1.8-1.9-4.2-2.8-6.6-2.8-2.3 0-4.6.9-6.5 2.6-11.5 11.4-41.2 41-43.3 43l-.2.2c-3.6 3.6-3.6 10.3 0 13.9z"></path>
          </svg></span></button>
      <button class="exit updated" type="button"><span>Updated</span></button>
      <button class="exit exitPage2" type="button"><span class="p2"><svg viewBox="-100.9 99.1 61.9 105.9" width="14" height="14">
            <path d="M-41.7 145.3l-43.5-43.5c-1.7-1.7-4-2.7-6.5-2.7s-4.8 1-6.5 2.7c-1.7 1.7-2.7 4-2.7 6.5s1 4.8 2.7 6.5L-61 152l-37.2 37.2c-1.7 1.7-2.7 4-2.7 6.5s1 4.8 2.6 6.5c1.8 1.9 4.2 2.8 6.6 2.8 2.3 0 4.6-.9 6.5-2.6 11.5-11.4 41.2-41 43.3-43l.2-.2c3.6-3.6 3.6-10.4 0-13.9z"></path>
          </svg></span></button>
    </div>
25

Iā€™m trying to add button-container2 to put the updated buttons in, but Iā€™m stuck.

https://jsfiddle.net/usfym8hg/2/

Iā€™m confused on how this would be done.

.button-container .button-container2 {
top: 480px;
}

    <div class="button-container2">
      <button class="exit updated" type="button"><span>Updated</span></button>
      <button class="exit updated" type="button"><span>Updated</span></button>
    </div>

.button-container .button-container2.exit.updated::before,
.button-container .button-container2.exit.updated::after {
  background: #2bd2ff;
  box-shadow: 0 0 5px #2bd2ff, 0 0 15px #2bd2ff, 0 0 30px #2bd2ff,
    0 0 60px #2bd2ff;
}
26

I did it: https://jsfiddle.net/7nojxp5m/

.button-container {
  position: absolute;
  top: 480px;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  display: flex;
  flex-wrap: wrap;
  margin: 50px auto 0;
  justify-content: center;
  align-content: center;
  max-width: 385px;
  gap: 200px;
  font-family: 'Roboto', sans-serif;
  padding-bottom:100px;
}

.button-container2{
  position: absolute;
  top: 580px;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
   margin: auto;
  display: flex;
  flex-wrap: wrap;
  margin: 80px auto 0;
  justify-content: center;
  align-content: center;
  max-width: 300px;
  gap: 40px;
  font-family: 'Roboto', sans-serif;
  padding-bottom:100px;
}


.button-container .exit {
  position: relative;
  width: 25px;
  height: 50px;
 /* margin: 20px;*/
  padding:0;
  border:none;
  border-radius:0;
  background:transparent;
  -webkit-appearance:none;
  appearance:none;
  cursor: pointer;
}



.button-container2 .exit.updated {
  position: relative;
  width: 100px;
  height: 50px;
  padding:0;
  border:none;
  border-radius:0;
  background:transparent;
  -webkit-appearance:none;
  appearance:none;
  cursor: pointer;
}

.button-container .exit span,
.button-container2 .exit.updated span{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background: rgba(255, 255, 255, 0.05);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 30px;
  color: #fff;
  z-index: 1;
  font-weight: 400;
  letter-spacing: 1px;
  text-decoration: none;
  overflow: hidden;
  transition: 0.5s;
  backdrop-filter: blur(15px);
}

.button-container .exit:hover span,
.button-container2 .exit.updated:hover span{
  letter-spacing: 3px;
}

.button-container .exit span::before,
.button-container2 .exit.updated span::before{
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  background: linear-gradient(to left, rgba(255, 255, 255, 0.15), transparent);
  transform: skewX(45deg) translateX(0);
  transition: 0.5s;
}

.button-container .exit.exitPage2:hover span::before,
.button-container2 .exit.updated:hover span::before{
  transform: skewX(45deg) translateX(200%);
}

.button-container .exit::before,
.button-container2 .exit.updated::before{
  content: '';
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: -5px;
  width: 30px;
  height: 10px;
  background: #f00;
  border-radius: 10px;
  transition: 0.5s;
  transition-delay: 0s;
}

.button-container .exit:hover::before,
.button-container2 .exit.updated:hover::before{
  bottom: 0;
  height: 50%;
  width: 80%;
  border-radius: 30px;
  transition-delay: 0.5s;
}

.button-container .exit::after,
.button-container2 .exit.updated::after{
  content: '';
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: -5px;
  width: 30px;
  height: 10px;
  background: #f00;
  border-radius: 10px;
  transition: 0.5s;
  transition-delay: 0s;
}

.button-container .exit:hover::after,
.button-container2 .exit.updated:hover::after{
  top: 0;
  height: 50%;
  width: 80%;
  border-radius: 30px;
  transition-delay: 0.5s;
}

.button-container .exit::before,
.button-container .exit::after {
  background: #2bd2ff;
  box-shadow: 0 0 5px #2bd2ff, 0 0 15px #2bd2ff, 0 0 30px #2bd2ff,
    0 0 60px #2bd2ff;
}

.button-container .exit.exitPage2::before,
.button-container .exit.exitPage2::after {
  background: #2bd2ff;
  box-shadow: 0 0 5px #2bd2ff, 0 0 15px #2bd2ff, 0 0 30px #2bd2ff,
    0 0 60px #2bd2ff;
}

.button-container2 .exit.updated::before,
.button-container2 .exit.updated::after {
  background: #2bd2ff;
  box-shadow: 0 0 5px #2bd2ff, 0 0 15px #2bd2ff, 0 0 30px #2bd2ff,
    0 0 60px #2bd2ff;
}
27

You canā€™t really do that in a fluid layout. Try something like bottom:auto and top:80%; It wonā€™t be perfect but you could tweak it at small widths with media queries.

As I said earlier the structure you have doesnā€™t allow for precise positioning of those buttons because they need to be related to how the fan resizes so they must be controlled from that element somehow or by a parent with the same characteristics.

The page would need restructuring so that the buttons can follow the fan in the normal flow of the page and just sit underneath. However that is awkward because you also have videos appearing and disappearing at different sizes and probably resizing at different rates.

Thatā€™s why I keep saying that ā€œabsolute elements are removed from the flow and donā€™t care about other contentā€. You either have to compromise or restructure (and probably still copmpromise).

28

Yes that is allowed.