Implementing a Bullet Firing Button Using HTML/CSS-PANDA

In game development and web interactive design, a bullet firing button is a common interactive element that allows users to shoot bullets or arrows by clicking or triggering it. With HTML and CSS, we can create a realistic bullet firing button, enhancing the genuine shooting experience for games or applications.

Here is the specific code:

HTML


<button>
  <span class="text">FIRE !!!</span>
  <span class="bullet"></span>
</button>

CSS

button {
  padding: 0 15px 0 15px;
  font-size: 17px;
  font-weight: 700;
  text-shadow: 1px 1px 2.3px rgba(255,255,255, 0.8);
  position: relative;
  width: 150px;
  height: 40px;
  border-radius: 100% 9% 9% 100% / 0% 100% 100% 0%;
  border: none;
  background-image: linear-gradient(
                    180deg, #CDB373, #795E2B,
                    #AD8D53, #FFFAB7, #795D2F,
                    #614818, #BC9859, #876A35,
                    #736141);
}

button::before {
  content: '';
  height: 44px;
  width: 10px;
  position: absolute;
  top: -4.7%;
  left: -5.9%;
  border-radius: 100% 31% 28% 100% / 0% 100% 100% 0%;
  background-image: linear-gradient(
                    180deg, #CDB373, #795E2B,
                    #AD8D53, #FFFAB7, #795D2F,
                    #614818, #BC9859, #876A35,
                    #736141);
}

.bullet {
  height: 38px;
  width: 60px;
  position: absolute;
  top: 3%;
  left: 95%;
  border-radius: 10% 100% 100% 10% / 10% 50% 50% 10%;
  background-image: linear-gradient(
                    180deg, #512614, #A1623A,
                    #BA7447, #EDC38B, #B27449,
                    #DDAB77, #EAC4AE, #B67E4E,
                    #5B2D17, #44271C);
  z-index: -1;
}

button:active .bullet {
  left: 115%;
  transition: all 0.2s;
}

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 {
      padding: 0 15px 0 15px;
      font-size: 17px;
      font-weight: 700;
      text-shadow: 1px 1px 2.3px rgba(255, 255, 255, 0.8);
      position: relative;
      width: 150px;
      height: 40px;
      border-radius: 100% 9% 9% 100% / 0% 100% 100% 0%;
      border: none;
      background-image: linear-gradient(180deg, #CDB373, #795E2B,
          #AD8D53, #FFFAB7, #795D2F,
          #614818, #BC9859, #876A35,
          #736141);
    }

    button::before {
      content: '';
      height: 44px;
      width: 10px;
      position: absolute;
      top: -4.7%;
      left: -5.9%;
      border-radius: 100% 31% 28% 100% / 0% 100% 100% 0%;
      background-image: linear-gradient(180deg, #CDB373, #795E2B,
          #AD8D53, #FFFAB7, #795D2F,
          #614818, #BC9859, #876A35,
          #736141);
    }

    .bullet {
      height: 38px;
      width: 60px;
      position: absolute;
      top: 3%;
      left: 95%;
      border-radius: 10% 100% 100% 10% / 10% 50% 50% 10%;
      background-image: linear-gradient(180deg, #512614, #A1623A,
          #BA7447, #EDC38B, #B27449,
          #DDAB77, #EAC4AE, #B67E4E,
          #5B2D17, #44271C);
      z-index: -1;
    }

    button:active .bullet {
      left: 115%;
      transition: all 0.2s;
    }
  </style>
</head>

<body>


  <button>
    <span class="text">FIRE !!!</span>
    <span class="bullet"></span>
  </button>


</body>

</html>

THE END