How do I disable a class on button click?-CodePudding

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

<body>
  <div >
    <div ></div>
    <a href="#" ></a>
  </div>
</body>

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!

CodePudding user response：

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

<html>
  <body>
    <div >
      <a href="#" ></a>
      <div ></div>
    </div>
  </body>
</html>

CodePudding user response：

If you don't mind using some basic javascript, you could turn the button into a toggle and add and remove the shadow at will. You can change toggle to remove if you just want it gone on click without the ability to bring it back without page reload

let shadowButton = document.getElementById("btn");
let shadow = document.getElementById("shadowDiv")
shadowButton.addEventListener('click', function() {
  shadow.classList.toggle("shadow");
})

* {
  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: 50px;
}

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

<div  id="btn">
  <div  id="shadowDiv"></div>
  <a href="#" ></a>
</div>