CODEWITHSUNDEEP
htmlcss
Lorrain
Lorrain

Reputation: 73

Buttons clickable area edit

How could I disable right half of this buttons clickable area? Button

HTML

.button {
  border-color: #000000;
  border-width: 0 3px 3px 0;
  width: 30px;
  height: 30px;
  background-color: rgba(0, 0, 0, 0);
  transform: rotate(135deg);
}
<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="button.css">
</head>

<body>
  <input class="button" type="button" />
</body>

</html>

Upvotes: 0

Views: 138

Answers (1)

Temani Afif
Temani Afif

Reputation: 272789

You may try this (i added a border and a background so we can see that it's only half) :

.button {
  border-color: #000000;
  border-width: 0 3px 3px 0;
  width: 30px;
  height: 30px;
  background-color: rgba(0, 0, 0, 0);
  background:red; /* Remove this background */
  transform: rotate(135deg);
  cursor: pointer;
}

.but {
  display: inline-block;
  border: 1px solid #000; /* Remove this border later */
  padding: 5px;
  width: 12px;
  overflow: hidden;
}
<span class="but">
<input class="button" type="button" />
</span>

Upvotes: 3

Related Questions