Zelf buttons maken WordPress Gutenberg blok html css

Je kan zelf buttons maken van je platte tekst. Bij elk blok kun je Extra CSS-class(es) invullen onder geavanceerd. In de voorbeelden zie je de namen van de classes.

Voorbeelden tekst in Gutenberg als button

Dit is een gewone link in Gutenberg zonder class:

Gutenberg tekst met link – zonder class

Hieronder zijn de volgende classes gebruikt:
– but voor de buttons
– kleurnaam (3x)
– big voor grote van de knop

Dit is een Gutenberg tekst met link class – but groen

Gutenberg tekst met link class – but blauw

Tekst met link class – but grijs

Grote buttons maken in Gutenberg met CSS

Dezelfde classes maar big toegevoegd:

Tekst met link class – but groen big

Tekst met link class – but blauw big

Tekst met link class – but grijs big

CSS Span toevoegen in je html button

Als je het html blok gebruikt kun je een span toevoegen. Een span is een stijl binnen je tekst

Log in voor cursisten

<a href="https://web-designers.nl/" class="but big groen">Log in <span>voor cursisten</span></a>

Log in voor cursisten

<a href="https://web-designers.nl/" class="but big blauw">Log in <span>voor cursisten</span></a>

Inschrijven WordPress training

<a href="https://web-designers.nl/" class="but big grijs">Inschrijven <span>WordPress training</span></a>

Inschrijven Design WordPress training

<a href="https://web-designers.nl/" class="but big grijs"><span>Inschrijven</span> Design <span>WordPress training</span></a>

CSS toevoegen aan je thema om button te maken

Je moet deze CSS toevoegen aan je thema (customizer) om button te maken:

/*===================
  buttons maken
   ===================*/
.but a, a.big {
	  color: rgba(255,255,255, .82) !important;
		    text-shadow: 1px 1px 5px rgba(0,0,0, .12);
}
.but a:hover, a.big:hover {
	  color: #fff !important;
	    text-shadow: 3px 3px 9px rgba(0,0,0, .4);
}


.but {
    display: inline-block;
    position: relative;
    margin: 10px;
    padding: 4px 18px;
    text-align: center;
    text-decoration: none;
    font: bold 12px/25px;
 
    text-shadow: 1px 1px 1px rgba(255,255,255, .22);
 
    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    border-radius: 30px;
 
    -webkit-box-shadow: 1px 1px 1px rgba(0,0,0, .29), inset 1px 1px 1px rgba(255,255,255, .44);
    -moz-box-shadow: 1px 1px 1px rgba(0,0,0, .29), inset 1px 1px 1px rgba(255,255,255, .44);
    box-shadow: 1px 1px 1px rgba(0,0,0, .29), inset 1px 1px 1px rgba(255,255,255, .44);
 
    -webkit-transition: all 0.15s ease;
    -moz-transition: all 0.15s ease;
    -o-transition: all 0.15s ease;
    -ms-transition: all 0.15s ease;
    transition: all 0.15s ease;
}


/* Big Button Stijl */
 
.big {
    padding: 10px 40px;
    padding-top: 5px;
	  padding-bottom: 5px;
    min-height: 45px !important;
    text-transform: uppercase;
    font-size: 1.17em !important;
}
.big span {
    display: block;
    text-transform: none;
    font-size: 0.7em !important;
    text-shadow: 1px 1px 1px rgba(0,0,0, .15);
}

/* Groene kleur */
 
.groen {
    /* color: #3e5706; */
 
    background: #a5cd4e; /* Old browsers */
    background: -moz-linear-gradient(top,  #a5cd4e 0%, #6b8f1a 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#a5cd4e), color-stop(100%,#6b8f1a)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #a5cd4e 0%,#6b8f1a 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #a5cd4e 0%,#6b8f1a 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #a5cd4e 0%,#6b8f1a 100%); /* IE10+ */
    background: linear-gradient(top,  #a5cd4e 0%,#6b8f1a 100%); /* W3C */
}
 
/* blauwe kleur */
 
.blauw {
     /* color: #19667d;  */
 
    background: #70c9e3; /* Old browsers */
    background: -moz-linear-gradient(top,  #70c9e3 0%, #39a0be 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#70c9e3), color-stop(100%,#39a0be)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #70c9e3 0%,#39a0be 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #70c9e3 0%,#39a0be 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #70c9e3 0%,#39a0be 100%); /* IE10+ */
    background: linear-gradient(top,  #70c9e3 0%,#39a0be 100%); /* W3C */
}
 
/* grijze kleur */
 
.grijs {
    /* color: color: #515151;  */
 
    background: #d3d3d3; /* Old browsers */
    background: -moz-linear-gradient(top,  #d3d3d3 0%, #8a8a8a 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#d3d3d3), color-stop(100%,#8a8a8a)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #d3d3d3 0%,#8a8a8a 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #d3d3d3 0%,#8a8a8a 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #d3d3d3 0%,#8a8a8a 100%); /* IE10+ */
    background: linear-gradient(top,  #d3d3d3 0%,#8a8a8a 100%); /* W3C */
}

Bron: dit is een verbeterde versie van dit artikel:
https://designmodo.com/create-css3-buttons