Create a button with a torn label effect using HTML/CSS-PANDA

Creating a button with a torn label effect purely using HTML and CSS involves a bit of styling to simulate the torn paper appearance. Here’s an example:

HTML

<button>
    <b>Fold me!</b>
</button>

CSS

button {
  position: relative;
  font-size: 1.2em;
  padding: 0.7em 1.4em;
  background-color: #BF0426;
  text-decoration: none;
  border: none;
  border-radius: 0.5em;
  color: #DEDEDE;
  box-shadow: 0.5em 0.5em 0.5em rgba(0, 0, 0, 0.3);
}

button::before {
  position: absolute;
  content: '';
  height: 0;
  width: 0;
  top: 0;
  left: 0;
  background: linear-gradient(135deg, rgba(33,33,33,1) 0%, rgba(33,33,33,1) 50%, rgba(150,4,31,1) 50%, rgba(191,4,38,1) 60%);
  border-radius: 0 0 0.5em 0;
  box-shadow: 0.2em 0.2em 0.2em rgba(0, 0, 0, 0.3);
  transition: 0.3s;
}

button:hover::before {
  width: 1.6em;
  height: 1.6em;
}

button:active {
  box-shadow: 0.2em 0.2em 0.3em rgba(0, 0, 0, 0.3);
  transform: translate(0.1em, 0.1em);
}

HTML & CSS

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    button {
      position: relative;
      font-size: 1.2em;
      padding: 0.7em 1.4em;
      background-color: #BF0426;
      text-decoration: none;
      border: none;
      border-radius: 0.5em;
      color: #DEDEDE;
      box-shadow: 0.5em 0.5em 0.5em rgba(0, 0, 0, 0.3);
    }

    button::before {
      position: absolute;
      content: '';
      height: 0;
      width: 0;
      top: 0;
      left: 0;
      background: linear-gradient(135deg, rgba(33, 33, 33, 1) 0%, rgba(33, 33, 33, 1) 50%, rgba(150, 4, 31, 1) 50%, rgba(191, 4, 38, 1) 60%);
      border-radius: 0 0 0.5em 0;
      box-shadow: 0.2em 0.2em 0.2em rgba(0, 0, 0, 0.3);
      transition: 0.3s;
    }

    button:hover::before {
      width: 1.6em;
      height: 1.6em;
    }

    button:active {
      box-shadow: 0.2em 0.2em 0.3em rgba(0, 0, 0, 0.3);
      transform: translate(0.1em, 0.1em);
    }
  </style>
</head>

<body>
  <button>
    <b>Fold me!</b>
  </button>
</body>

</html>

THE END