Behöver skapa knapp med effekt på hovra med Elementor ?
Om så är fallet, ta plats i denna magnifika buss, för vad vi kommer att uppnå idag är i följande video:
Låt oss skapa en sida och sedan ändra den med Elementor, välj sedan en struktur med 2 kolumner. Låt oss i panelen ändra det nyskapade avsnittet genom att välja Min höjd på fältet HÖGMOD och på plats Min höjd låt oss klicka vidare VH ställ sedan markören på 100.
På fliken Stil låt oss ändra bakgrundsfärgen till # 070e39.
I den första kolumnen, låt oss släppa en Button-widget, ändra dess text genom att skriva Visa detaljer och låt oss justera den till höger
På fliken Stil låt oss ändra det typografi genom att ändra storleken på 15, transformation sur versaler et teckenavstånd sur 1.1
På fliken advanced, ändra alla marginaler sur 20 och i avsnittet Anpassad CSS, låt oss klistra in följande kod som lägger till en gradient till knappen:
väljare {
–Btn-bredd: 180px;
–Btn-höjd: 50px;
–Btn-bakgrund: # 0e1538;
– Vänstergradient: # F803F8;
–Höger-gradient: # 03F2FD;
}
väljare en {
positioner: släkting;
width: var (–btn-width);
höjd: var (–btn-höjd);
}
väljare a: före,
väljare a: efter {
Lycklig: ";
position: absolut;
infälld: 0;
övergång: 0.5s;
}
väljare a: n:te barn (1): före,
selector a: nth-child (1): efter {
bakgrund: linjär-gradient (45deg, var (–vänster-gradient), var (–btn-bakgrund), var (–btn-bakgrund), var (–höger-gradient));
}
selector a: hover: before {
infälld: -3px;
}
selector a: hover: after {
infälld: -3px;
filter: oskärpa (10px);
}
selector a span {
position: absolut;
topp: 0;
vänster: 0;
bredd: 100%;
höjd: 100%;
bakgrund: var (–btn-bakgrund);
z-index: 10;
display: flex;
justify-content: center;
align-items: center;
översvämning: dold;
}
Om du nu håller muspekaren över knappen kommer du att upptäcka magnifika effekter.
För att lägga till en glänsande glaseffekt på knappen låt oss också klistra in följande kod:
/ * Glänsande glaseffekt * /
selector a span :: före {
Lycklig: ";
position: absolut;
topp: 0;
vänster: -50%;
bredd: 100%;
höjd: 100%;
bakgrund: rgba (255,255,255,0.075);
transformera: skev (160 grader);
}
Du ser en ny effekt som ger mer ljus till knappen.
Läs också: Hur man skapar en gruppmedlemssektion med Elementor
Låt oss nu kopiera den här knappen och klistra in den i den andra kolumnen. Låt oss ändra knappjusteringen till vänster och ändra texten till Se mer.
Nu måste du bara publicera ditt arbete eller förhandsgranska det.
Här är 2 vackra knappar skapade.
Skaffa Elementor Pro nu!
Slutsats
Så ! Det var allt för den här handledningen som visar hur du skapar en knapp med svävningseffekt med sidkonstruktör Elementor. Om du har några funderingar kring hur du ska ta dig dit, låt oss veta inom commentaires.
Du kan dock också konsultera våra resurser, om du behöver fler element för att genomföra dina projekt för att skapa webbplatser, genom att konsultera vår guide om WordPress blogg skapande eller den på Divi: det bästa WordPress-temet genom tiderna.
Men under tiden dela den här artikeln på dina olika sociala nätverk.
.
