SCRIPT MENYUNTIKAN ELEMEN KE ID DAN CLASS
<div class="wadah-tombol"></div>
<script>
if (window.innerWidth >= 400) {
document.querySelectorAll('.wadah-tombol').forEach(el => {
el.innerHTML = '<button type="button" class="btn-klik">Tombol Label Klik</button>';
});
}
</script>
<div id="wadah-tombol"></div>
<script>
if (window.innerWidth >= 400) {
document.getElementById('wadah-tombol').innerHTML = '<button type="button" class="btn-klik">Tombol Label Klik</button>';
}
</script>
=================
button{background:none;border-color:transparent;outline:none}
.icon-btn{background:transparent;cursor:pointer;width:48px;height:48px;padding:0;border:0;outline:0;display:inline-flex;align-items:center;justify-content:center;vertical-align:middle;line-height:0;border-radius:100%;color:var(--warna-ikon)}
:is(.icon-btn,.search-form .search-submit):hover{background-color:light-dark(rgba(0,0,0,.1), rgba(255,255,255,.1));color:var(--warna-link-hover)}
:is(button,.icon-btn,.nav-button,.dark-btn,.switcher-btn,.reverse-btn,.btn-search,.search-form .search-submit):focus-visible{outline:2px solid #007bff;outline-offset:2px}
.dark-btn,.switcher-btn,.reverse-btn{transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.2s ease;will-change:transform}
.dark-btn:active,.switcher-btn:active,.reverse-btn:active{transform: scale(0.9) rotate(30deg)}
