Kode Mengubah Ukuran Teks 02

Ukuran Font:

A-

20

A+

Ukuran font bisa diatur dengan tombol A- dan A+.

 Kode Html Mengubah Ukuran Teks

>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>

<!doctype html>

<html>

  <head>

    <title>Pengubah Ukuran Font</title>

    <style>

      .font-size-buttons {

        display: flex;

        align-items: center;

        font-size: 20px;

        margin-bottom: 10px;

      }

      .font-size-buttons > div:first-child {

        margin-right: 10px;

      }

      .font-size-button {

        display: flex;

        justify-content: center;

        align-items: center;

        width: 40px;

        height: 40px;

        border-radius: 50%;

        background-color: #ddd;

        color: #333;

        font-weight: bold;

        margin-right: 10px;

        cursor: pointer;

        transition: all 0.2s ease-in-out;

      }

      .font-size-button:hover {

        background-color: #333;

        color: #fff;

      }

      .font-size-button.active {

        background-color: #333;

        color: #fff;

      }

      .font-size-button.minus {

        background-color: #ff6b6b;

        color: white;

        font-size: 24px;

      }

      .font-size-button.plus {

        background-color: #2ed573;

        color: white;

        font-size: 24px;

      }

      .font-size-button.normal {

        font-size: 20px;

      }

    </style>

  </head>

  <body>

    <div class="font-size-buttons">

      <div><span style="margin-right: 10px;">Ukuran Font:</span></div>

      <div class="font-size-button minus" onclick="changeFontSize('smaller')">A-</div>

      <div class="font-size-button normal active" data-size="20" onclick="changeFontSize('normal')">20</div>

      <div class="font-size-button plus" onclick="changeFontSize('larger')">A+</div>

    </div>

    <p style="font-size: 20px;">Ukuran font bisa diatur dengan tombol A- dan A+.</p>

    <script>

      function changeFontSize(size) {

        var elements = document.querySelectorAll("p, h3, h4, h5, h6");

        var activeButton = document.querySelector('.font-size-button.active');

        var currentFontSize = parseInt(activeButton.dataset.size);

        var newFontSize;

        if (size === 'larger') {

          newFontSize = currentFontSize + 2;

        } else if (size === 'smaller') {

          newFontSize = currentFontSize - 2;

        } else {

          newFontSize = 20;

        }

        if (newFontSize >= 12 && newFontSize <= 30) {

          for (var i = 0; i < elements.length; i++) {

            elements[i].style.fontSize = newFontSize + 'px';

          }

          activeButton.textContent = newFontSize;

          activeButton.dataset.size = newFontSize;

          activeButton.classList.remove('active');

          document.querySelector(`.font-size-button[data-size="${newFontSize}"]`).classList.add('active');

        }

      }

    </script>

  </body>

</html>

Kode CSS Mengubah Ukuran Tombol

>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>

.font-size-button.minus:hover {

  animation: pulse 0.5s ease-in-out infinite;

}

.font-size-button.plus:hover {

  animation: pulse 0.5s ease-in-out infinite;

}

@keyframes pulse {

  0% {

    transform: scale(1);

  }

  50% {

    transform: scale(1.2);

  }

  100% {

    transform: scale(1);

  }

}