Back to CSS Dark Mode UI OLED Card Pure CSS
Share
HTML
<div class="dm-oled-bg">
  <article class="dm-oled">
    <span class="dm-oled__tag">NEW</span>
    <h3 class="dm-oled__title">Battery saver</h3>
    <p class="dm-oled__body">Pure-black surfaces save up to 60% on OLED screens.</p>
    <button class="dm-oled__btn">Learn more →</button>
  </article>
</div>
CSS
.dm-oled-bg { padding: 28px; border-radius: 16px; background: #000; }
.dm-oled {
  background: #000;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
  padding: 18px 20px;
  color: #ededed;
}
.dm-oled__tag {
  display: inline-block;
  background: transparent;
  color: #4ade80;
  border: 1px solid #4ade80;
  padding: 2px 8px; border-radius: 4px;
  font: 700 9px ui-monospace, monospace;
  letter-spacing: 0.12em;
  margin-bottom: 12px;
}
.dm-oled__title { margin: 0 0 6px; font: 700 16px/1.2 system-ui, sans-serif; color: #fff; }
.dm-oled__body  { margin: 0 0 14px; font: 12px/1.55 system-ui, sans-serif; color: rgba(255, 255, 255, 0.55); }
.dm-oled__btn {
  background: none; border: none;
  color: #4ade80; padding: 0;
  font: 600 12px system-ui, sans-serif; cursor: pointer;
  transition: color 0.2s;
}
.dm-oled__btn:hover { color: #86efac; }