Sådan oprettes: CSS bånd

Sådan oprettes bånd

1. Trin - Tilføj HTML:

I dette eksempel tilhører båndet button-elementet:

<button class="btn">En knap til noget koldt <span class="ribbon">NY</span></button>

2. Trin - Tilføj 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;
}

Prøv det selv

Eksempel Forklaring:

I dette eksemplet bruges CSS til at tilføje en båndeffekt til en knap. Effekten opnås ved at tilføje en span-element med en bestemt stil inden i knappelementet. Dette span-element er placeret i øverste højre hjørne af knappen og roteret 20 grader for at skabe båndeffekten. Baggrundsfarven og tekstdesignet for båndet er også sat til forskellige farver end knappen for at øge visuelle effekter.