Ihr möchted einen Like Button für eure Webseite oder ihr möchtet einen Button wo ihr zeigt wieviele Follower ihr habt? Dann seid ihr hier genau richtig. Im heutigen Video zeige ich euch wie man so einen Button mit CSS designen kann. Später könnt ihr dann selbst das Icon austauschen oder die Zahlen anpassen – so wie es euch gefällt.

Video

HTML

<button class="Btn">
      <span class="linkerbereich">
        <i class="fa-solid fa-heart"></i>
        <span class="like">Like</span>
      </span>
      <span class="counter"> 2,050 </span>
    </button>

CSS

:root {
  --seite-bg: #0d3b66;
  --icon-color: #fff;

  --links-bg: #b40000;
  --counter-bg: #fff;
  --text-linker-color: #fff;
  --text-counter-color: #b40000;
  --ecke-color: #fff;
  --linkerbereich-hover: #c32f27;
  --linkerbereich-active: #db7c26;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  background: var(--seite-bg);
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}
.fa-heart {
  color: var(--icon-color);
}

.Btn {
  width: 140px;
  height: 35px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  border: none;
  border-radius: 5px;
  overflow: hidden;
  cursor: pointer;
  background-color: transparent;
}

.linkerbereich {
  width: 60%;
  height: 100%;
  background-color: var(--links-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.linkerbereich .like {
  color: var(--text-linker-color);
  font-weight: 600;
}

.counter {
  width: 40%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-counter-color);
  font-weight: 600;
  position: relative;
  background-color: var(--counter-bg);
}

.counter::before {
  height: 8px;
  width: 8px;
  position: absolute;
  content: "";
  background-color: var(--ecke-color);
  transform: rotate(45deg);
  left: -4px;
}

.Btn:hover .linkerbereich {
  background-color: var(--linkerbereich-hover);
}

.Btn:hover .linkerbereich .fa-heart {
  color: #000;
}