How do I disable a class on button click?

Question

i have a button with shadow around. The shadow is in an extra class.

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: consolas;
  min-height: 100%;
}

body {
  font-family: 'Anonymous Pro', monospace;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background: #C7DEFA;
  position: relative;
}

.btn {
  position: relative;
  width: 66px;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  right: -500px;
}

.btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 10px;
  height: 100%;
  background: linear-gradient(#fff, #fff, #F9FCFF);
  z-index: 1;
  filter: blur(1px);
}

.btn::after {
  content: '';
  position: absolute;
  top: 0;
  right: -1px;
  width: 10px;
  height: 100%;
  background: #9CA6B1;
  z-index: 1;
  filter: blur(1px);
}

.btn-after {
  position: relative;
  width: 100%;
  height: 100%;
  border: none;
  padding: 10px 25px;
  outline: none;
  background: linear-gradient(#D8E8FC, #B2C2D5);
  box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.1), 15px 15px 15px rgba(0, 0, 0, 0.1), 20px 20px 15px rgba(0, 0, 0, 0.1), 30px 30px 15px rgba(0, 0, 0, 0.1), inset 1px 1px 2px #fff;
}

.shadow {
  position: absolute;
  top: 0;
  left: -50px;
  width: calc(100% + 50px);
  height: 300px;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.1), transparent, transparent);
  transform-origin: top;
  transform: skew(45deg);
  pointer-events: none;
}

.shadow::before {
  content: '';
  position: absolute;
  width: 50px;
  height: 50px;
  background: #C7DEFA;
  z-index: 1;
}

What I need help with is, to disable the .shadow class while btn:active. So there would be no shadow if the btn is clicked. It should look like a keyboard button with shadow when not clicked and without shadow when clicked.

Thx alot!

user_17780636 · Answer

CSS is only for styling purpose and it cannot modify the document itself (elements, classes, etc.). If you do not want a certain style, you have to work around that - by putting more constraints to restrict the style to apply, for example, only when it is not clicked.

:not(:active) may be what you want. However, normal elements do not handle :active selector, and thus I changed the order of the element and used .btn-after:not(:active) + .shadow to apply shadow only when the link is not active.

See :active and Adjacent sibling combinator(+) for more info.

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: consolas;
  min-height: 100%;
}

body {
  font-family: 'Anonymous Pro', monospace;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background: #C7DEFA;
  position: relative;
}

.btn {
  position: relative;
  width: 66px;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 10px;
  height: 100%;
  background: linear-gradient(#fff, #fff, #F9FCFF);
  z-index: 1;
  filter: blur(1px);
}

.btn::after {
  content: '';
  position: absolute;
  top: 0;
  right: -1px;
  width: 10px;
  height: 100%;
  background: #9CA6B1;
  z-index: 1;
  filter: blur(1px);
}

.btn-after {
  position: relative;
  width: 100%;
  height: 100%;
  border: none;
  padding: 10px 25px;
  outline: none;
  background: linear-gradient(#D8E8FC, #B2C2D5);
  box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.1),
    15px 15px 15px rgba(0, 0, 0, 0.1),
    20px 20px 15px rgba(0, 0, 0, 0.1),
    30px 30px 15px rgba(0, 0, 0, 0.1),
    inset 1px 1px 2px #fff;
}

.btn-after:not(:active)+.shadow {
  position: absolute;
  top: 0;
  left: -50px;
  width: calc(100% + 50px);
  height: 300px;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.1),
      transparent, transparent);
  transform-origin: top;
  transform: skew(45deg);
  pointer-events: none;
  z-index: -2;
}

.btn-after:not(:active)+.shadow::before {
  content: '';
  position: absolute;
  width: 50px;
  height: 50px;
  background: #C7DEFA;
  z-index: -1;
}

How do I disable a class on button click?

1 Answers