Moet een knop maken met effect op zweven met Elementor ?
Neem dan plaats in deze prachtige bus, want wat we vandaag gaan bereiken, staat in de volgende video:
Laten we een pagina maken en deze vervolgens aanpassen met Elementoren selecteer vervolgens een structuur met twee kolommen. Laten we in het paneel de nieuw gemaakte sectie wijzigen door te selecteren Minimale hoogte op het veld hoogmoed en onmiddelijk Minimale hoogte laten we klikken op VH zet dan de cursor op 100.
In het tabblad Style laten we de achtergrondkleur veranderen in # 070e39.
Laten we in de eerste kolom een ​​knopwidget neerzetten, de tekst wijzigen door te typen Details bekijken en laten we het naar rechts uitlijnen
In het tabblad Style laten we het aanpassen typografie door de maat te veranderen op 15, transformatie op Hoofdletters et letterafstand op 1.1
In het tabblad vergevorderd, alles wijzigen marges op 20 en in de sectie Aangepaste CSS, laten we de volgende code plakken die een verloop aan de knop toevoegt:
kiezer {
–Btn-breedte: 180px;
–Btn-hoogte: 50px;
–Btn-achtergrond: # 0e1538;
–Links-gradiënt: # F803F8;
–Rechts verloop: # 03F2FD;
}
kiezer een {
position: relative;
breedte: var (–btn-breedte);
hoogte: var (–btn-hoogte);
}
selector a: voor,
selector a: na {
blij: ";
positie: absoluut;
inzet: 0;
overgang: 0.5s;
}
selector a: n-de kind (1): voor,
selector a: n-de-kind (1): na {
achtergrond: lineair verloop (45deg, var (-links-gradiënt), var (-btn-achtergrond), var (-btn-achtergrond), var (-rechts-gradiënt));
}
selector a: hover: before {
inzet: -3px;
}
selector a: hover: na {
inzet: -3px;
filter: vervagen (10px);
}
selector een span {
positie: absoluut;
boven: 0;
links: 0;
breedte: 100%;
hoogte: 100%;
achtergrond: var (–btn-achtergrond);
z-index: 10;
weergave: flex;
rechtvaardigen-inhoud: centrum;
uitlijnen-items: center;
overloop verborgen;
}
Als je nu over de knop zweeft, zul je prachtige effecten ontdekken.
Om een ​​glanzend glaseffect aan de knop toe te voegen, plakken we ook de volgende code:
/ * Glanzend glaseffect * /
selector een span :: before {
blij: ";
positie: absoluut;
boven: 0;
links: -50%;
breedte: 100%;
hoogte: 100%;
achtergrond: rgba (255,255,255,0.075);
transformeren: scheeftrekken (160deg);
}
Je ziet een nieuw effect dat meer licht op de knop brengt.
Lees ook: Een teamledensectie maken met Elementor
Laten we nu deze knop kopiëren en in de tweede kolom plakken. Laten we de knopuitlijning naar links veranderen en de tekst veranderen in meer.
Nu moet je gewoon publiceren uw werk of bekijk het.
Hier zijn 2 mooie buttons gemaakt.
Download Elementor Pro nu!
Conclusie
Alstublieft ! Dat is het voor deze tutorial die je laat zien hoe je een knop met zweefeffect maakt met de page builder Elementor. Als u zich zorgen maakt over hoe u daar kunt komen, laat het ons dan weten binnen commentaires.
U kunt echter ook overleggen onze middelen, als u meer elementen nodig hebt om uw projecten voor het maken van internetsites uit te voeren, raadpleeg onze gids op de WordPress blog creatie of die op Divi: het beste WordPress-thema aller tijden.
Maar in de tussentijd deel dit artikel op uw verschillende sociale netwerken.
...
