Dialer Keypad — Free Phone Dialpad UI HTML CSS Snippet

<div class="dl-phone">
  <div class="dl-screen">
    <div class="dl-display">
      <div class="dl-num" id="dlNum">&nbsp;</div>
      <div class="dl-name" id="dlName"></div>
    </div>
    <div class="dl-pad" id="dlPad">
      <button data-k="1"><b>1</b><small>&nbsp;</small></button>
      <button data-k="2"><b>2</b><small>ABC</small></button>
      <button data-k="3"><b>3</b><small>DEF</small></button>
      <button data-k="4"><b>4</b><small>GHI</small></button>
      <button data-k="5"><b>5</b><small>JKL</small></button>
      <button data-k="6"><b>6</b><small>MNO</small></button>
      <button data-k="7"><b>7</b><small>PQRS</small></button>
      <button data-k="8"><b>8</b><small>TUV</small></button>
      <button data-k="9"><b>9</b><small>WXYZ</small></button>
      <button data-k="*"><b>&lowast;</b><small>&nbsp;</small></button>
      <button data-k="0"><b>0</b><small>+</small></button>
      <button data-k="#"><b>#</b><small>&nbsp;</small></button>
    </div>
    <div class="dl-actions">
      <span class="dl-spacer"></span>
      <button class="dl-call" id="dlCall" aria-label="Call">
        <svg viewBox="0 0 24 24" width="26" fill="#fff"><path d="M6.6 10.8a15.5 15.5 0 0 0 6.6 6.6l2.2-2.2a1 1 0 0 1 1-.24 11 11 0 0 0 3.5.56 1 1 0 0 1 1 1V20a1 1 0 0 1-1 1A17 17 0 0 1 3 4a1 1 0 0 1 1-1h3.5a1 1 0 0 1 1 1c0 1.2.2 2.4.56 3.5a1 1 0 0 1-.25 1z"/></svg>
      </button>
      <button class="dl-del" id="dlDel" aria-label="Delete">
        <svg viewBox="0 0 24 24" width="24" fill="none" stroke="#94a3b8" stroke-width="2" stroke-linecap="round"><path d="M21 5H9L3 12l6 7h12z"/><path d="M14 9l-4 6M10 9l4 6"/></svg>
      </button>
    </div>
  </div>
</div>

*{box-sizing:border-box;margin:0;padding:0}
body{font-family:system-ui,-apple-system,sans-serif;background:#1e293b;display:flex;justify-content:center;align-items:center;min-height:100vh;padding:24px}

.dl-phone{width:280px;height:580px;background:#0b1220;border-radius:46px;padding:11px;box-shadow:0 30px 60px -20px rgba(0,0,0,.6),inset 0 0 0 2px #1e293b}
.dl-screen{width:100%;height:100%;border-radius:34px;overflow:hidden;background:#f8fafc;color:#0f172a;display:flex;flex-direction:column;padding:26px 26px 22px}

.dl-display{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:80px}
.dl-num{font-size:34px;font-weight:600;letter-spacing:1px;font-variant-numeric:tabular-nums;min-height:42px;color:#0f172a;word-break:break-all;text-align:center;line-height:1.1}
.dl-name{font-size:13px;color:#22c55e;font-weight:700;margin-top:6px;min-height:18px}

.dl-pad{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:16px}
.dl-pad button{aspect-ratio:1;border:none;background:#fff;border-radius:50%;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;font-family:inherit;box-shadow:0 2px 6px -3px rgba(0,0,0,.25);transition:background .1s,transform .08s}
.dl-pad button:active{background:#e2e8f0;transform:scale(.93)}
.dl-pad b{font-size:25px;font-weight:600;line-height:1}
.dl-pad small{font-size:8.5px;font-weight:700;letter-spacing:1px;color:#94a3b8;height:9px}

.dl-actions{display:flex;align-items:center;justify-content:space-between}
.dl-spacer,.dl-del{width:52px}
.dl-call{width:60px;height:60px;border-radius:50%;background:#22c55e;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 8px 20px -6px rgba(34,197,94,.7);transition:transform .1s}
.dl-call:active{transform:scale(.92)}
.dl-call.calling{animation:dlPulse 1s ease infinite}
@keyframes dlPulse{50%{box-shadow:0 8px 30px 4px rgba(34,197,94,.9)}}
.dl-del{height:52px;background:none;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .15s}
.dl-del.show{opacity:1;pointer-events:auto}

var numEl = document.getElementById('dlNum');
var nameEl = document.getElementById('dlName');
var del = document.getElementById('dlDel');
var call = document.getElementById('dlCall');
var digits = '';

// A tiny fake contacts book for the green caller-ID line.
var CONTACTS = { '5550100': 'Sara Chen', '5550199': 'Pizza Palace', '911': 'Emergency' };

function format(d) {
  // US-style grouping once enough digits are present.
  if (d.length >= 7 && /^[0-9]+$/.test(d)) {
    if (d.length <= 10) return d.replace(/(\d{0,3})(\d{0,3})(\d{0,4})/, function (_, a, b, c) {
      return [a && '(' + a + ')', b, c].filter(Boolean).join(' ');
    });
  }
  return d;
}

function render() {
  numEl.innerHTML = digits ? format(digits) : '&nbsp;';
  nameEl.textContent = CONTACTS[digits] || '';
  del.classList.toggle('show', digits.length > 0);
}

document.getElementById('dlPad').addEventListener('click', function (e) {
  var btn = e.target.closest('button');
  if (!btn) return;
  if (digits.length < 15) { digits += btn.getAttribute('data-k'); render(); }
});

del.addEventListener('click', function () { digits = digits.slice(0, -1); render(); });
del.addEventListener('dblclick', function () { digits = ''; render(); }); // press-hold equivalent

call.addEventListener('click', function () {
  if (!digits) return;
  call.classList.add('calling');
  nameEl.textContent = 'Calling…';
  setTimeout(function () { call.classList.remove('calling'); render(); }, 2200);
});

render();