Hur man skapar: Full bredd (block) knapp

Lär dig hur man använder CSS för att ställa in stilen för en blockknapp (full bredd).

Hur man ställer in stilen för en blockknapp

Steg 1 - Lägg till HTML:

<button type="button" class="block">Blockknapp</button>

Steg 2 - Lägg till CSS:

För att skapa en blockknapp, lägg till 100% bredd och gör den till en blockelement:

.block {
  display: block;
  width: 100%;
  border: none;
  background-color: #04AA6D;
  padding: 14px 28px;
  font-size: 16px;
  cursor: pointer;
  text-align: center;
}

Prova själv

Relaterade sidor

Tutorials:CSS-knapp