So einfach baust du einen DropDown Button mit HTML und CSS

Heute zeige ich euch wie man einen DropDown Button mit HTML und CSS programmieren kann. Ein DropDown Button ist nichts anderes wie ein DropDown Liste in einem Formular. Man kann hinter 1 einfachen Button mehrere Auswahlmöglichkeiten verstecken und kann so auf wenig Platz viel Infos unterbringen.

Sehr praktisch 🙂 Und alles ohne JS sondern nur mit HTML und CSS. Damit ist dieser Button selbst auf den Smartphone zu gebrauchen.

Video

HTML

<div class="container">
      <button class="dropdown-button">
        Social Media <i class="fa-solid fa-arrow-up-right-from-square"></i>
      </button>
      <div class="dropdown-content">
        <a href="#">Facebook</a>
        <a href="#">Mastodon</a>
        <a href="#">Tiktok</a>
      </div>
    </div>

CSS

body {
  background-color: #b5e2fa;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

.container {
  position: relative;
  display: inline-block;
}

.dropdown-button {
  background-color: #0fa3b1;
  color: white;
  padding: 10px 16px;
  border: none;
  cursor: pointer;
  font-size: 16px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.dropdown-content {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background-color: #f9f7f3;
  min-width: 160px;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
  z-index: 1;
  border-radius: 4px;
  overflow: hidden;
}

.dropdown-content a {
  color: black;
  padding: 10px 16px;
  text-decoration: none;
  display: block;
}

.dropdown-content a:hover {
  background-color: #eddea4;
}

.container:hover .dropdown-content {
  display: block;
}