12 Button-Effekte, auf die man wirklich klicken möchte.

Buttons sind klein, aber ziemlich entscheidend dafür, wie sich eine Website anfühlt. Manche wirken ruhig und klar, andere dürfen beim Darüberfahren etwas mehr zeigen. Hier finden Sie zwölf CSS Button-Effekte, die wir auch selbst einsetzen würden.

Wenn Sie selbst bauen, können Sie HTML und CSS direkt übernehmen. Für Ihr eigenes Projekt können Sie die Varianten, die Ihnen gefallen, einfach auf den D/7 Merkzettel setzen.

So müssen Sie später nicht erklären, wie ein Button „ungefähr“ reagieren soll. Sie zeigen uns einfach Ihre Auswahl – und wir sehen sofort, welche Richtung zu Ihrer neuen Website passt.

D/7 B01

Ruhig mit Pfeil

Ein klassischer Button mit einer kleinen Bewegung im Pfeil. Passt fast überall, ohne sich in den Vordergrund zu drängen.

Projekt ansehen

HTML & CSS für B01

HTML

<a href="#" class="d7-btn-b01">
  Projekt ansehen
  <span>→</span>
</a>

CSS

.d7-btn-b01 {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 15px 20px;
  border-radius: 999px;
  background: #4566d9;
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  transition: background .2s ease;
}

.d7-btn-b01 span {
  transition: transform .2s ease;
}

.d7-btn-b01:hover {
  background: #3554c3;
  color: #fff;
}

.d7-btn-b01:hover span {
  transform: translateX(4px);
}

D/7 B02

Fläche von links

Im ersten Moment nur eine Kontur. Beim Hover zieht die dunkle Fläche von links in den Button.

Mehr erfahren →

HTML & CSS für B02

HTML

<a href="#" class="d7-btn-b02">
  <span>Mehr erfahren →</span>
</a>

CSS

.d7-btn-b02 {
  position: relative;
  display: inline-flex;
  overflow: hidden;
  padding: 15px 21px;
  border: 1px solid #172033;
  border-radius: 999px;
  color: #172033;
  text-decoration: none;
  font-weight: 600;
  transition: color .35s ease;
}

.d7-btn-b02::before {
  content: "";
  position: absolute;
  inset: 0;
  background: #172033;
  transform: translateX(-102%);
  transition: transform .35s ease;
}

.d7-btn-b02 span {
  position: relative;
  z-index: 1;
}

.d7-btn-b02:hover {
  color: #fff;
}

.d7-btn-b02:hover::before {
  transform: translateX(0);
}

D/7 B03

Kontur wird Fläche

Eine einfache Variante für Seiten, auf denen der Button zunächst etwas zurückhaltender wirken soll.

Kontakt aufnehmen →

HTML & CSS für B03

HTML

<a href="#" class="d7-btn-b03">
  Kontakt aufnehmen →
</a>

CSS

.d7-btn-b03 {
  display: inline-flex;
  padding: 14px 20px;
  border: 2px solid #4566d9;
  border-radius: 12px;
  background: transparent;
  color: #4566d9;
  text-decoration: none;
  font-weight: 600;
  transition: .25s ease;
}

.d7-btn-b03:hover {
  background: #4566d9;
  color: #fff;
  transform: translateY(-2px);
}

D/7 B04

Button mit Pfeilkreis

Text und Pfeil sind optisch getrennt. Beim Hover dreht sich nur der Pfeil leicht nach oben.

Referenzen ansehen

HTML & CSS für B04

HTML

<a href="#" class="d7-btn-b04">
  <span class="d7-btn-b04__text">Referenzen ansehen</span>
  <span class="d7-btn-b04__arrow">↗</span>
</a>

CSS

.d7-btn-b04 {
  display: inline-flex;
  align-items: center;
  padding: 5px 5px 5px 20px;
  border-radius: 999px;
  background: #172033;
  color: #fff;
  text-decoration: none;
  font-weight: 600;
}

.d7-btn-b04__text {
  color: #fff;
}

.d7-btn-b04__arrow {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  margin-left: 12px;
  border-radius: 50%;
  background: #dfe5ff;
  color: #172033;
  transition: transform .25s ease;
}

.d7-btn-b04:hover {
  color: #fff;
}

.d7-btn-b04:hover .d7-btn-b04__arrow {
  transform: rotate(45deg);
}

D/7 B05

Leicht angehoben

Ein sehr dezenter Effekt. Der Button hebt sich beim Hover nur ein paar Pixel an.

Angebot anfragen →

HTML & CSS für B05

HTML

<a href="#" class="d7-btn-b05">
  Angebot anfragen →
</a>

CSS

.d7-btn-b05 {
  display: inline-flex;
  padding: 15px 21px;
  border-radius: 14px;
  background: #fff;
  color: #172033;
  text-decoration: none;
  font-weight: 600;
  box-shadow: 0 7px 20px rgba(23,32,51,.10);
  transition: .25s ease;
}

.d7-btn-b05:hover {
  color: #172033;
  transform: translateY(-4px);
  box-shadow: 0 15px 32px rgba(23,32,51,.15);
}

D/7 B06

Kreis wird Fläche

Ein kleiner Farbkreis wächst beim Hover über die gesamte Fläche des Buttons.

Projekt starten →

HTML & CSS für B06

HTML

<a href="#" class="d7-btn-b06">
  <span>Projekt starten →</span>
</a>

CSS

.d7-btn-b06 {
  position: relative;
  display: inline-flex;
  overflow: hidden;
  padding: 15px 21px;
  border-radius: 999px;
  background: #172033;
  color: #fff;
  text-decoration: none;
  font-weight: 600;
}

.d7-btn-b06::before {
  content: "";
  position: absolute;
  width: 18px;
  height: 18px;
  right: 18px;
  top: 50%;
  border-radius: 50%;
  background: #4566d9;
  transform: translateY(-50%);
  transition: transform .45s ease;
}

.d7-btn-b06 span {
  position: relative;
  z-index: 1;
  color: #fff;
}

.d7-btn-b06:hover {
  color: #fff;
}

.d7-btn-b06:hover::before {
  transform: translateY(-50%) scale(18);
}

D/7 B07

Textlink mit Linie

Kein klassischer Button. Die Linie wächst beim Hover unter dem Text weiter.

Mehr über das Projekt

HTML & CSS für B07

HTML

<a href="#" class="d7-btn-b07">
  Mehr über das Projekt
  <span>→</span>
</a>

CSS

.d7-btn-b07 {
  position: relative;
  display: inline-flex;
  gap: 10px;
  padding: 8px 0;
  color: #172033;
  text-decoration: none;
  font-weight: 600;
}

.d7-btn-b07::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 2px;
  height: 2px;
  background: #4566d9;
  transform: scaleX(.22);
  transform-origin: left;
  transition: transform .28s ease;
}

.d7-btn-b07:hover {
  color: #172033;
}

.d7-btn-b07:hover::after {
  transform: scaleX(1);
}

D/7 B08

Pfeil nach außen

Ein einfacher Link-Button mit einer kleinen diagonalen Bewegung im Pfeil.

Website ansehen

HTML & CSS für B08

HTML

<a href="#" class="d7-btn-b08">
  Website ansehen
  <span>↗</span>
</a>

CSS

.d7-btn-b08 {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  padding: 15px 18px 15px 20px;
  border: 1px solid #ccd3df;
  border-radius: 10px;
  background: #fff;
  color: #172033;
  text-decoration: none;
  font-weight: 600;
  transition: .25s ease;
}

.d7-btn-b08 span {
  transition: transform .25s ease;
}

.d7-btn-b08:hover {
  color: #172033;
  border-color: #4566d9;
}

.d7-btn-b08:hover span {
  transform: translate(3px,-3px);
}

D/7 B09

Textwechsel

Beim Hover wird der erste Text nach oben geschoben und durch einen zweiten ersetzt.

Mehr erfahren → Los geht's →

HTML & CSS für B09

HTML

<a href="#" class="d7-btn-b09">
  <span class="d7-btn-b09__inner">
    <span class="d7-btn-b09__line">Mehr erfahren →</span>
    <span class="d7-btn-b09__line">Los geht's →</span>
  </span>
</a>

CSS

.d7-btn-b09 {
  position: relative;
  display: inline-flex;
  min-width: 172px;
  height: 52px;
  overflow: hidden;
  border-radius: 999px;
  background: #4566d9;
  color: #fff;
  text-decoration: none;
}

.d7-btn-b09__inner {
  position: absolute;
  inset: 0;
  transition: transform .35s ease;
}

.d7-btn-b09__line {
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 600;
}

.d7-btn-b09:hover {
  color: #fff;
}

.d7-btn-b09:hover .d7-btn-b09__inner {
  transform: translateY(-52px);
}

D/7 B10

Bewegter Verlauf

Der Farbverlauf verschiebt sich beim Hover. Etwas auffälliger, aber immer noch gut einsetzbar.

Jetzt entdecken →

HTML & CSS für B10

HTML

<a href="#" class="d7-btn-b10">
  Jetzt entdecken →
</a>

CSS

.d7-btn-b10 {
  display: inline-flex;
  padding: 15px 21px;
  border-radius: 999px;
  background: linear-gradient(
    110deg,
    #3149aa,
    #657ee8,
    #815bc8,
    #3149aa
  );
  background-size: 260% 100%;
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  transition: .55s ease;
}

.d7-btn-b10:hover {
  color: #fff;
  background-position: 100% 0;
  transform: translateY(-2px);
}

D/7 B11

Transparent auf dunklem Grund

Eine zurückhaltende Variante für dunkle Flächen, große Bilder oder Hero-Bereiche.

Projekt entdecken →

HTML & CSS für B11

HTML

<a href="#" class="d7-btn-b11">
  Projekt entdecken →
</a>

CSS

.d7-btn-b11 {
  display: inline-flex;
  padding: 15px 21px;
  border: 1px solid rgba(255,255,255,.45);
  border-radius: 999px;
  background: rgba(255,255,255,.10);
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  backdrop-filter: blur(12px);
  transition: .25s ease;
}

.d7-btn-b11:hover {
  color: #fff;
  background: rgba(255,255,255,.18);
  border-color: rgba(255,255,255,.75);
  transform: translateY(-2px);
}

D/7 B12

Der dailyseven

Runde Form, klarer Text und ein eigener Bereich für den Pfeil. So ähnlich setzen wir Buttons auch selbst ein.

Projekt besprechen

HTML & CSS für B12

HTML

<a href="#" class="d7-btn-b12">
  <span class="d7-btn-b12__text">Projekt besprechen</span>
  <span class="d7-btn-b12__arrow">→</span>
</a>

CSS

.d7-btn-b12 {
  display: inline-flex;
  align-items: center;
  padding: 5px 5px 5px 20px;
  border-radius: 999px;
  background: #4566d9;
  color: #fff;
  text-decoration: none;
  font-weight: 600;
}

.d7-btn-b12__text {
  color: #fff;
}

.d7-btn-b12__arrow {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  margin-left: 12px;
  border-radius: 50%;
  background: rgba(255,255,255,.18);
  color: #fff;
  transition: .25s ease;
}

.d7-btn-b12:hover {
  color: #fff;
}

.d7-btn-b12:hover .d7-btn-b12__arrow {
  transform: translateX(3px);
  background: rgba(255,255,255,.28);
}

D/7 Designbibliothek