TechBlogSD - Allt för WordPress- och WEB -utveckling
WEB- och WordPress - instruktioner, nyheter, recensioner av teman och plugins

Hur lägger jag till 3D CSS -tryckknappar i Weebly?

5

I vår tidigare artikel såg vi hur vi lägger till och anpassar standard Weebly -knappelement. Även om det är möjligt att ändra knapparna, är redigering av befintlig knappstil en komplicerad uppgift och fungerar ofta inte som du förväntat dig. Den enkla lösningen är att bädda in din egen anpassade CSS/HTML med hjälp av Weebly bädda in kodelement. Du får inte anpassningsalternativen vid inbäddning, men du kan enkelt skapa attraktiva knappar med CSS -effekter. Här förklarar vi hur du lägger till 3D CSS -knappar på Weebly -webbplatsen.

3D CSS tryckknappar

Nedan ser hur 3D -knapparna kommer att se ut.

Hur lägger jag till 3D CSS -tryckknappar i Weebly?

Knapparna har följande funktioner:

  • Inga bilder krävs vilket förbättrar webbplatsens laddningshastighet och dina ansträngningar för att skapa bilder.
  • Färger och stilar kan enkelt anpassas för att passa alla typer av teman och layouter.
  • Du kan styra antalet knappar i HTML med hjälp av inbäddningskodelement. Detta innebär att du kan placera olika antal knappar på olika sidor och hålla käll -CSS densamma.
  • Varje knapp kan länkas till en enda eller alla sidor på din webbplats.

Hur lägger jag till 3D CSS -tryckknappar i Weebly?

Vi kommer här att förklara hur du lägger till 5 knappar med ovanstående 3D -stil. Du kan ta bort eller lägga till CSS och motsvarande HTML för att lägga till eller ta bort knappar och ändra färg och stilar.

Steg #1 – Lägga till knapp CSS

Det första steget är att bestämma om du bara vill lägga till knapparna på få sidor eller många sidor på din webbplats. Om du vill lägga till på några sidor lägger du bara till CSS -koden på de sidorna under "Sidor> Välj en sida> SEO -inställningar> Rubrikkod" enligt nedan:

Hur lägger jag till 3D CSS -tryckknappar i Weebly?

Lägg till rubrikkod på sidan

Om du vill lägga till knapparna på flera sidor rekommenderas att du lägger till CSS -format i ett externt formatmall och länkar till sidan. Weebly har som standard bara ett externt formatmall per webbplats. Gå till avsnittet "Tema> Redigera HTML / CSS> Stilar> main.less". Leta reda på filen och lägg till koden längst ner i andra befintliga koder. Spara dina ändringar och avsluta kodredigeraren.

Hur lägger jag till 3D CSS -tryckknappar i Weebly?

Redigera huvud -CSS -fil i Weebly

När du använder kodredigeraren måste du spara temat med ett anpassat namn. Om du inte vill redigera temat går du till avsnittet "Inställningar> SEO> Rubrikkod". Här kan du lägga till CSS -koden som kommer att tillämpas på alla sidor på din webbplats (liknande att redigera main.less -fil).

Hur lägger jag till 3D CSS -tryckknappar i Weebly?

Lägg till rubrikkod på Weebly -webbplatsnivå

Här är CSS -koden för 3D -knappar:

<style type="text/CSS"> a.css3dbutton { background: #c1e75c; color: black; text-decoration: none; font: bold 18px Arial; position: relative; display: inline-block; margin-right: 15px; padding: 15px; border-radius: 85px; width: 85px; height: 85px; outline: none; box-shadow: 0 8px 0 #8dab3b, 0 0 3px rgba(0,0,0, 0.2), 0 20px 20px #eee; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; } a.css3dbutton span.outer{ text-align: center; width: 100%; display: block; position: relative; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); -moz-transform: translateY(-50%); transform: translateY(-50%); } a.css3dbutton span.outer span.top{ display: block; padding-bottom: 4px; } a.css3dbutton span.outer span.bottom{ border-top: 1px solid black; padding-top: 4px; display: block; text-transform: uppercase; line-height: 12px; font-size: 60%; } a.css3dbutton:hover { background: #9cc62b; box-shadow: none; -ms-transform: translateY(8px); -webkit-transform: translate3D(0, 8px, 0); -moz-transform: translateY(8px); transform: translate3D(0, 8px, 0); } a.css3dbutton.blue{ background: #a6e9f7; box-shadow: 0 8px 0 #529dad, 0 0 3px rgba(0,0,0, 0.2), 0 20px 20px #eee; } a.css3dbutton.blue:hover { background: #66cbe1; box-shadow: none; } a.css3dbutton.pink{ background: #fbbaba; box-shadow: 0 8px 0 #d74848, 0 0 3px rgba(0,0,0, 0.2), 0 20px 20px #eee; } a.css3dbutton.pink:hover { background: #ea6161; box-shadow: none; } a.css3dbutton.yellow{ background: #f3fa86; box-shadow: 0 8px 0 #dbcd2f, 0 0 3px rgba(0,0,0, 0.2), 0 20px 20px #eee; } a.css3dbutton.yellow:hover { background: #ecd347; box-shadow: none; } a.css3dbutton.brown{ background: #e0c87e; box-shadow: 0 8px 0 #b3805b, 0 0 3px rgba(0,0,0, 0.2), 0 20px 20px #eee; } a.css3dbutton.brown:hover { background: #b3805b; box-shadow: none; } </style>

Läs mer om hur du redigerar käll -CSS / HTML i Weebly.

Steg #2 – Lägga till HTML -kod

Dra och släpp ett inbäddningskodselement på en sida där du vill lägga till knapparna och klistra in koden nedan. Glöm inte att ersätta # med dina egna länkar.

<div> <a href="#" class="css3dbutton"> <span class="outer"> <span class="top">Register </span> <span class="bottom">Register here free</span> </span> </a> <a href="#" class="css3dbutton blue"> <span class="outer"> <span class="top">Login</span> <span class="bottom">Login to access</span> </span> </a> <a href="#" class="css3dbutton pink"> <span class="outer"> <span class="top">Sign Up</span> <span class="bottom">Sign up for free</span> </span> </a> <a href="#" class="css3dbutton yellow"> <span class="outer"> <span class="top">Blog</span> <span class="bottom">Subscribe to blog</span> </span> </a> <a href="#" class="css3dbutton brown"> <span class="outer"> <span class="top">Forum</span> <span class="bottom">Read forum posts</span> </span> </a> </div>

Steg #3 – Anpassa knapparna

Det finns oändliga möjligheter att anpassa knapparna efter behov. Här är några allmänna scenarier du kanske letar efter.

Lägga till eller ta bort knappar

Antag att du bara behöver 3 knappar istället för 5 som visas i exemplet. I det här fallet kan du ta bort koden för fjärde och femte knappar från både CSS och HTML. Men vi skulle rekommendera att lägga till det maximala antalet stilar i CSS och sedan styra antalet knappar i HTML. I det här scenariot, där du bara behöver tre knappar, lämna CSS -koden som den har som har fem olika stilar definierade och lägg till HTML -kod endast för tre knappar.

På detta sätt kan du lägga till 3 knappar på en sida, 5 knappar på en annan sida och så vidare.

Anpassa färger och storlek

  • Du kan ändra textfärgen och färgen på knappattributen som bakgrund och skugga.
  • Ändra bredd- och höjdattributen för att ändra rundknappen till oval storlek eller andra proportioner.

Kom ihåg att du kan använda distanselement för att lägga till tillräckligt med utrymme ovanför och under knapparna. På samma sätt kan du placera knappen på höger eller vänster sida av något annat element med hjälp av distans.

Inspelningskälla: www.webnots.com
Leave A Reply

Denna webbplats använder cookies för att förbättra din upplevelse. Vi antar att du är ok med detta, men du kan välja bort det om du vill. Jag accepterar Fler detaljer