Hoe te maken: CSS Band

Hoe een band te maken

Eerste stap - Voeg HTML toe:

In dit voorbeeld behoort de band tot het button-element:

<button class="btn">Een knop voor iets cool <span class="ribbon">NIEUW</span></button>

Tweede stap - Voeg CSS toe:

.btn {
  border: none;
  border-radius: 5px;
  padding: 12px 20px;
  font-size: 16px;
  cursor: pointer;
  background-color: #282A35;
  color: white;
  position: relative;
}
.ribbon {
  width: 60px;
  font-size: 14px;
  padding: 4px;
  position: absolute;
  right: -25px;
  top: -12px;
  text-align: center;
  border-radius: 25px;
  transform: rotate(20deg);
  background-color: #ff9800;
  color: white;
}

Probeer het zelf uit

Voorbeeldverklaring:

In dit voorbeeld wordt CSS gebruikt om een bandeffect toe te voegen aan een knop. Dit effect wordt bereikt door een span-element met een specifieke stijl binnen het knopelement toe te voegen. Dit span-element wordt geplaatst in de rechterbovenhoek van de knop en wordt 20 graden gedraaid om een bandeffect te creëren. De achtergrondkleur en tekstkleur van de band zijn ook ingesteld op kleuren die afwijken van de knop, om de visuele effecten te versterken.