HTML Buttons not clickable-CodePudding

I have a set of buttons for a calculator application with attributes. They are clickable when the CSS is turned off here is the relevant bits of code. Currently the buttons are not clickable in any sort of way. Any help on why they are not would be great

.grid {
  display: grid;
  align-content: center;
  justify-content: center;
  min-height: 100%;
  grid-template-columns: repeat(5, 100px);
  grid-template-rows: minmax(120px, auto) repeat(5, 100px);
}

.grid>button {
  font-size: 30px;
  border: 1px solid white;
}

.outputD {
  grid-column: 1/ -1;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-direction: column;
  padding: 10px;
  word-wrap: break-word;
  word-break: break-all;
  background-color: lightgray;
}

.outputD .curDisplayed {
  font-size: 2%;
  color: black;
}

.double {
  grid-column: span 2;
}

<div >
  <div >
    <div data-cD ></div>
    <div data-pD ></div>
  </div>
  <button data-operation >AC</button>
  <button data-delete>DEL</button>
  <button data-number>1</button>
  <button data-number>2</button>
  <button data-number>3</button>
  <button data-number>4</button>
  <button data-number>5</button>
  <button data-number>6</button>
  <button data-number>7</button>
  <button data-number>8</button>
  <button data-number>9</button>
  <button data-number>0</button>
  <button data-number>.</button>
  <button data-operation> </button>
  <button data-operation>-</button>
  <button data-operation>*</button>
  <button data-operation>/</button>
  <button data-operation >=</button>
</div>

CodePudding user response：

.grid {
  display: grid;
  align-content: center;
  justify-content: center;
  min-height: 100%;
  grid-template-columns: repeat(5, 100px);
  grid-template-rows: minmax(120px, auto) repeat(5, 100px);
}

.grid>button {
  font-size: 30px;
  border: 1px solid white;
}
.grid>button:hover {
  background-color:lightgray;/*effect*/
}

.outputD {
  grid-column: 1/ -1;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-direction: column;
  padding: 10px;
  word-wrap: break-word;
  word-break: break-all;
  background-color: lightgray;
}

.outputD .curDisplayed {
  font-size: 2%;
  color: black;
}

.double {
  grid-column: span 2;
}

<div >
  <div >
    <div data-cD ></div>
    <div data-pD ></div>
  </div>
  <button data-operation >AC</button>
  <button data-delete>DEL</button>
  <button data-number>1</button>
  <button data-number>2</button>
  <button data-number>3</button>
  <button data-number>4</button>
  <button data-number>5</button>
  <button data-number>6</button>
  <button data-number>7</button>
  <button data-number>8</button>
  <button data-number>9</button>
  <button data-number>0</button>
  <button data-number>.</button>
  <button data-operation> </button>
  <button data-operation>-</button>
  <button data-operation>*</button>
  <button data-operation>/</button>
  <button data-operation  onclick="console.log('working');">=</button>
</div>

everything is working,
try clicking = button,
it will log in console.

Edit: Added effect of clicking when hovered

CodePudding user response：

This is because you are giving border with color white, its not like your button is not clickable, try by removing "border: 1px solid white;" from the css .grid>button