Replacing one button style with another

HTML & CSS
1

Is there a simple way to figure this out?

I was doing this which jsfiddle was telling me was wrong:

.exitA,
.exitB,
.exitC,
.closeB::after,
.exitA,
.exitB,
.exitC,
.closeB::before

wrong

How do I do this:

I want to replace this:

 <button class="exitA" type="button" title="Exit" aria-label="Exit"></button>
 <button class="exitB" type="button" title="Exit" aria-label="Exit"></button>
<button class="exitC" type="button" title="Exit" aria-label="Exit"></button>
<button class="exitD" type="button" title="Exit" aria-label="Exit"></button>
<button class="closeA" title="Close" aria-label="Close">&times;</button>
<button data-destination="#ba" class="playbuttonB" type="button" title="Open" aria-label="Open"></button>
<button class="closeB" type="button" title="Close" aria-label="Close">&times</button>

.exitA,
.exitB,
.exitC,
.closeB {
  transform: translateY(100%);
  position: absolute;
  inset: auto 0 -6px 0;
  margin: auto;
  width: 47px;
  height: 47px;
  background: black;
  border-radius: 50%;
  border: 5px solid #0059dd;
  cursor: pointer;
  opacity: 0;
  transition: opacity 2s ease-in;
  transition-delay: 1s;
  pointer-events: none;
}

.exitA.visible,
.exitB.visible,
.exitC.visible,
.closeB.visible {
  opacity: 1;
  pointer-events: auto;
  cursor: pointer;
}

.exitD,
.closeA {
  position: absolute;
  margin: 6px auto 0;
  left: 0;
  right: 0;
  width: 47px;
  height: 47px;
  background: black;
  border-radius: 50%;
  border: 5px solid #0059dd;
  cursor: pointer;
}

.playbuttonB {
  position: relative;
  margin: 6px auto 0;
  inset: 0 0 0 0;
  width: 47px;
  height: 47px;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  background: black;
  border-radius: 50%;
  border: 5px solid #0059dd;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

With this:

https://jsfiddle.net/wtefncou/

<div class="chrome-icon"></div>

The code here is set to div, it would need to be changed to button.

Did that here: https://jsfiddle.net/wtefncou/2/

added:

  width: 52px;
  height: 52px;


.chrome-icon {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  z-index: 4;
}

.chrome-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  box-shadow:
    inset 0 -20px 25px 0 rgba(0, 0, 0, 0.2),
    0 2px 4px 1px rgba(0, 0, 0, 0.4),
    inset 0 40px 40px -15px rgba(255, 255, 255, 0.4);
  overflow: hidden;
  background: #0059dd;
}

.chrome-icon::after,
.chrome-icon::before {
  content:"";
  height: 24px;
  width: 24px;
  left: 12px;
  top: 12px;
  border-radius: 50%;
  background: white;
  box-shadow: 0 -5px 50px 0 rgba(0, 0, 0, 0.2);
  position: absolute;
}

.chrome-icon::before {
  z-index: 2;
  top: 14px;
  left: 14px;
  height: 20px;
  width: 20px;
  background: #15202b;
  box-shadow: inset 0 -20px 30px 0 rgba(0, 0, 0, 0.2);
}
2

Here is what I have now:

.exitA,
.exitB,
.exitC,
.closeB {
  transform: translateY(100%);
  position: absolute;
  inset: auto 0 -6px 0;
  margin: auto;
  width: 52px;
  height: 52px;

  cursor: pointer;
  opacity: 0;
  transition: opacity 2s ease-in;
  transition-delay: 1s;
  pointer-events: none;
}

.exitA.visible,
.exitB.visible,
.exitC.visible,
.closeB.visible {
  opacity: 1;
  pointer-events: auto;
  cursor: pointer;
}

.exitD,
.closeA {
  position: absolute;
  margin: 6px auto 0;
  left: 0;
  right: 0;
  width: 52px;
  height: 52px;
  
  cursor: pointer;
}

.playbuttonB {
  position: relative;
  margin: 6px auto 0;
  inset: 0 0 0 0;
  width: 52px;
  height: 52px;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

How would I fit the above code into here? https://jsfiddle.net/wtefncou/2/

.chrome-icon {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  box-shadow:
    inset 0 -20px 25px 0 rgba(0, 0, 0, 0.2),
    0 2px 4px 1px rgba(0, 0, 0, 0.4),
    inset 0 40px 40px -15px rgba(255, 255, 255, 0.4);
  overflow: hidden;
  background: #0059dd;
}

.chrome-icon::after,
.chrome-icon::before {
  content:"";
  height: 24px;
  width: 24px;
  left: 12px;
  top: 12px;
  border-radius: 50%;
  background: white;
  box-shadow: 0 -5px 50px 0 rgba(0, 0, 0, 0.2);
  position: absolute;
}

.chrome-icon::before {
  z-index: 2;
  top: 14px;
  left: 14px;
  height: 20px;
  width: 20px;
  background: #15202b;
  box-shadow: inset 0 -20px 30px 0 rgba(0, 0, 0, 0.2);
}
3

My attempt:

Added to video code: https://jsfiddle.net/mjykxwa7/1/

What am I doing wrong?

tiny button

Button by itself: https://jsfiddle.net/wtefncou/2/

bbitslf

.exitA,
.exitB,
.exitC,
.closeB,
.chrome-icon {
 transform: translateY(100%);
  position: absolute;
  inset: auto 0 -6px 0;
  margin: auto;
  cursor: pointer;
  opacity: 1;
  transition: opacity 2s ease-in;
  transition-delay: 1s;
  pointer-events: none;
  z-index: 4;
}

.exitA,
.exitB,
.exitC,
.closeB,
.chrome-icon {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  box-shadow:
    inset 0 -20px 25px 0 rgba(0, 0, 0, 0.2),
    0 2px 4px 1px rgba(0, 0, 0, 0.4),
    inset 0 40px 40px -15px rgba(255, 255, 255, 0.4);
  overflow: hidden;
  background: #0059dd;
}
.exitA,
.exitB,
.exitC,
.closeB,
.chrome-icon::after,
.exitA,
.exitB,
.exitC,
.closeB,
.chrome-icon::before {
  content:"";
  height: 24px;
  width: 24px;
  left: 12px;
  top: 12px;
  border-radius: 50%;
  background: white;
  box-shadow: 0 -5px 50px 0 rgba(0, 0, 0, 0.2);
  position: absolute;
}

.exitA,
.exitB,
.exitC,
.closeB,
.chrome-icon::before {
  z-index: 2;
  top: 14px;
  left: 14px;
  height: 20px;
  width: 20px;
  background: #15202b;
  box-shadow: inset 0 -20px 30px 0 rgba(0, 0, 0, 0.2);
}
4

Aren’t they all supposed to be :before.

e.g.


.exitA::after,
.exitB::after,
.exitC::after,
.closeB::after,
.chrome-icon::after,
.exitA::before,
.exitB::before,
.exitC::before,
.closeB::before,
.chrome-icon::before {
  content: "";
  height: 24px;
  width: 24px;
  left: 12px;
  top: 12px;
  border-radius: 50%;
  background: white;
  box-shadow: 0 -5px 50px 0 rgba(0, 0, 0, 0.2);
  position: absolute;
}

.exitAn::before,
.exitBn::before,
.exitCn::before,
.closeBn::before,
.chrome-icon::before {
  z-index: 2;
  top: 14px;
  left: 14px;
  height: 20px;
  width: 20px;
  background: #15202b;
  box-shadow: inset 0 -20px 30px 0 rgba(0, 0, 0, 0.2);
}

However as I have told you many times before you could simply style them all with one class (.chrome-icon) and just style the differences with your exitA /b/c classes (if needed) and you wouldn’t keep making these simple mistakes.

<button class="exitA chrome-icon" type="button" title="Exit" aria-label="Exit"></button>

2 Likes
6

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