Vill du skapa en flerfärgad gradientknapp i Elementor ?
Som standard, Elementor har en funktion för att skapa en gradientfärg för din knapp, men den är bara begränsad till två färger. Den här artikeln kommer att visa dig hur du skapar en flerfärgad gradientknapp i Elementor utan hjälp av ett tillägg, bara med hjälp av Elementors anpassade CSS.
Att lägga till en flerfärgsgradient till din knapp kan få din knapp att se attraktiv ut och få en naturlig känsla. Du kanske undrar, "Är det möjligt att skapa en flerfärgad gradientknapp på din webbplats? ”. Tja, allt är möjligt med Elementor och du kan enkelt skapa en flerfärgad gradientknapp.
Hur man skapar flerfärgad gradientknapp i Elementor
Innan du startar handledningen vill vi låta dig veta att den här handledningen kommer att fungera med anpassad CSS. Anpassad CSS-funktion är endast tillgänglig på Elementor Pro; så se till att uppgradera till proversionen.
Gå nu till din Elementor-redigerare. Vi börjar från början, så skapa ett avsnitt med bara en kolumn. Välj sedan knappwidgeten i widgetpanelen och dra och släpp den sedan till redigeringsområdet i Elementor. När du har lagt till knappwidgeten kan du redigera och utforma widgeten enligt dina önskemål.
I widgetinställningarna, navigera till fliken advanced -> Anpassad CSS. Kopiera CSS-kodavsnittet nedan och klistra sedan in det i det anpassade CSS-fältet.
selector .elementor-button {
background: linear-gradient(121.28deg, #A4006C 0%, #FFECA8 100%), linear-gradient(121.28deg, #69003F 0%, #FFF8F8 100%), linear-gradient(238.72deg, #00FFFF 0%, #0212A4 100%), radial-gradient(67.16% 100% at 50% 0%, #FF00B8 0%, #FFFFFF 100%), linear-gradient(140.54deg, #7000FF 0%, #001AFF 72.37%), linear-gradient(307.43deg, #FFE927 0%, #00114D 100%), radial-gradient(107% 142.8% at 15.71% 104.5%, #FFFFFF 0%, #A7AA00 100%), #FFFFFF;
background-blend-mode: overlay, difference, difference, overlay, difference, difference, difference, normal;
}
Om du är nöjd med flerfärgsgradienten som har tillämpats (som i bilden ovan), kan du behålla det så och spara ditt projekt om du vill. Men om du vill anpassa det kan du göra det genom att modifiera CSS-kodavsnittet mer specifikt på CSS-deklarationsblocket.
CSS-deklarationsblocket börjar med en öppningsklammer ( {'' ) och slutar med den avslutande högra klammerparentesen(''} ).
För att få deklarationsblocket kan du skapa en gradient med hjälp av outils online gradient css. Cliquez ici att se några outils av CSS-gradient. När du är klar med att skapa övertoningen kopierar du CSS och ersätter det befintliga deklarationsblocket med ett nytt genom att klistra in CSS.
Remarque: Du kan också skapa gradienttitel i Elementor .
Skaffa Elementor Pro nu!!!
Slutsats
Den här artikeln visar hur enkelt du kan skapa en flerfärgad gradientknapp i Elementor. Om du använder Elementor som sidbyggare för din webbplats WordPress och du vill skapa en fantastisk knapp med en mångfärgad gradient, den här artikeln kan vara din lösning.
Enfärgade eller tvåfärgade knappar kan se enkla och tråkiga ut. Men se upp med att skapa flerfärgade övertoningar på dina knappar. Var uppmärksam på tonen och färgblandningen du använder så att dina knappar inte ser konstiga och tråkiga ut.
Här! Det är det för den här artikeln som visar dig hur skapa flerfärgsgradientknapp i 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.
.
