Hur skapar man: CSS Band

Hur skapar man ett band

Steg 1 - Lägg till HTML:

I detta exempel tillhör bandet knappelementet:

<button class="btn">En knapp för något kallt <span class="ribbon">NY</span></button>

Steg 2 - Lägg till CSS:

.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;
}

Prova själv

Exempel förklaring:

I detta exempel används CSS för att lägga till en bandeffekt till en knapp. Effekten skapas genom att lägga till en span-element med en specifik stil inuti knappelementet. Detta span-element placeras på den övre högra hörnet av knappen och roteras 20 grader för att skapa en bandeffekt. Bakgrundsfärgen och textfärgen för bandet är också satta till färger som skiljer sig från knappen för att öka visuella effekter.