Adăugarea de Butoane
Adăugarea de Butoane în GeneratePress – Unele teme sunt integrate cu butoane care utilizează coduri scurte. Acest lucru este în general descurajat în comunitatea WordPress, deoarece creează ceva numit „blocarea temei”, ceea ce înseamnă că dacă vă schimbați tema, conținutul dvs. va fi plin de coduri scurte sparte în loc de butoane.
Din acest motiv, vă sugerăm să utilizați HTML simplu și CSS pentru a crea butoane pe site-ul dvs. În acest fel, nu le veți pierde niciodată – vor fi întotdeauna butoane.
În mod implicit, GeneratePress are o clasă .button pe care o puteți folosi pentru a crea un buton.
<a class="button" href="https://google.com">Button to Google</a>
Acest buton va fi proiectat folosind culorile și tipografia din Personalizator.
De asemenea, puteți adăuga propriul dvs. CSS pentru a stila butonul.
De exemplu:
.button.sun-flower,
.button.sun-flower:visited {
background: #F1C40F;
color:#FFF;
}
.button.sun-flower:hover,
.button.sun-flower:active {
background: #E2B607;
color:#FFF;
}Dacă adăugăm acel CSS pe site-ul nostru, acum putem adăuga un buton cu acele culori, astfel:
<a class="button sun-flower" href="URL PENTRU BUTONUL DVS.">Textul butonului dvs.</a>Butoane Fantomă
Butoanele fantomă sunt foarte populare acum – le veți vedea peste tot, inclusiv pe generatepress.com. Au un fundal transparent cu chenar – atunci când treceți cu mouse-ul, fundalul transparent se completează.
De exemplu:
.button.ghost, .button.ghost:visited {
background: transparent;
border: 2px solid #FFF;
}
.button.ghost:hover,
.button.ghost:active {
background: #FFFFFF;
color: #222222;
border: 2px solid transparent;
}Butoane cu Gradient
De asemenea, puteți crea un buton gradient cu acest CSS:
.button.gradient,
.button.gradient:visited {
border-radius: 5px; /*Adjust accordingly*/
background: rgb(255, 183, 65);
background: -webkit-gradient(linear, left top, left bottom, color-stop(49%, rgba(255, 183, 65, 1)), to(rgba(214, 38, 38, 1)));
background: linear-gradient(180deg, rgba(255, 183, 65, 1) 49%, rgba(214, 38, 38, 1) 100%);
-webkit-transition: all 0.35s ease;
transition: all 0.35s ease;
background-repeat: repeat-y;
background-size: 100% 90px;
background-position: 0 -30px;
}
.button.gradient:hover,
.button.gradient:active {
background-position: 0;
}Pentru a regla gradul liniar, vă recomandăm să utilizați acest site: https://cssgradient.io
Mai Multe Stiluri de Butoane
Iată câteva stiluri de butoane pe care le puteți adăuga la CSS:
.button.medium {
font-size: 25px;
}
.button.large {
font-size: 35px;
}
.button.sun-flower,
.button.sun-flower:visited {
background: #F1C40F;
color:#FFF;
}
.button.sun-flower:hover,
.button.sun-flower:active {
background: #E2B607;
color:#FFF;
}
.button.orange,
.button.orange:visited {
background: #F39C12;
color:#FFF;
}
.button.orange:hover,
.button.orange:active {
background: #E8930C;
color:#FFF;
}
.button.carrot,
.button.carrot:visited {
background: #E67E22;
color:#FFF;
}
.button.carrot:hover,
.button.carrot:active {
background: #DA751C;
color:#FFF;
}
.button.pumpkin,
.button.pumpkin:visited {
background: #D35400;
color:#FFF;
}
.button.pumpkin:hover,
.button.pumpkin:active {
background: #C54E00;
color:#FFF;
}
.button.alizarin,
.button.alizarin:visited {
background: #E74C3C;
color:#FFF;
}
.button.alizarin:hover,
.button.alizarin:active {
background: #DB4334;
color:#FFF;
}
.button.pomegranate,
.button.pomegranate:visited {
background: #C0392B;
color:#FFF;
}
.button.pomegranate:hover,
.button.pomegranate:active {
background: #B53224;
color:#FFF;
}
.button.turquoise,
.button.turquoise:visited {
background: #1ABC9C;
color:#FFF;
}
.button.turquoise:hover,
.button.turquoise:active {
background: #12AB8D;
color:#FFF;
}
.button.green-sea,
.button.green-sea:visited {
background: #16A085;
color:#FFF;
}
.button.green-sea:hover,
.button.green-sea:active {
background: #14947B;
color:#FFF;
}
.button.emerald,
.button.emerald:visited {
background: #2ECC71;
color:#FFF;
}
.button.emerald:hover,
.button.emerald:active {
background: #28BE68;
color:#FFF;
}
.button.nephritis,
.button.nephritis:visited {
background: #27AE60;
color:#FFF;
}
.button.nephritis:hover,
.button.nephritis:active {
background: #219D55;
color:#FFF;
}
.button.river,
.button.river:visited {
background: #3498DB;
color:#FFF;
}
.button.river:hover,
.button.river:active {
background: #2A8BCC;
color:#FFF;
}
.button.ocean,
.button.ocean:visited {
background: #2980B9;
color:#FFF;
}
.button.ocean:hover,
.button.ocean:active {
background: #2475AB;
color:#FFF;
}
.button.amethyst,
.button.amethyst:visited {
background: #9B59B6;
color:#FFF;
}
.button.amethyst:hover,
.button.amethyst:active {
background: #8D4CA7;
color:#FFF;
}
.button.wisteria,
.button.wisteria:visited {
background: #8E44AD;
color:#FFF;
}
.button.wisteria:hover,
.button.wisteria:active {
background: #80399D;
color:#FFF;
}
.button.wet-asphalt,
.button.wet-asphalt:visited {
background: #34495E;
color:#FFF;
}
.button.wet-asphalt:hover,
.button.wet-asphalt:active {
background: #263849;
color:#FFF;
}
.button.midnight-blue,
.button.midnight-blue:visited {
background: #2C3E50;
color:#FFF;
}
.button.midnight-blue:hover,
.button.midnight-blue:active {
background: #22303F;
color:#FFF;
}
.button.silver,
.button.silver:visited {
background: #BDC3C7;
color:#FFF;
}
.button.silver:hover,
.button.silver:active {
background: #ACB2B7;
color:#FFF;
}
.button.concrete,
.button.concrete:visited {
background: #7F8C8D;
color:#FFF;
}
.button.concrete:hover,
.button.concrete:active {
background: #6D7B7C;
color:#FFF;
}
.button.graphite,
.button.graphite:visited {
background: #454545;
color:#FFF;
}
.button.graphite:hover,
.button.graphite:active {
background: #363535;
color:#FFF;
}Aflați cum să adăugați CSS aici.
