Hvordan legge til 3D CSS -trykknapper i Weebly?

I vår forrige artikkel så vi hvordan du legger til og tilpasser standard Weebly -knappelement. Selv om det er mulig å endre knappene, er redigering av eksisterende knappestil en komplisert oppgave og fungerer ofte ikke som du forventet. Den enkle løsningen er å bygge inn din egen tilpassede CSS/HTML ved hjelp av Weebly -innebygde kodeelement. Du får ikke tilpasningsmulighetene når du legger inn, men du kan enkelt lage en attraktiv knapp med CSS -effekter. Her forklarer vi hvordan du legger til 3D CSS -trykknapper på Weebly -stedet.

3D CSS trykknapper

Nedenfor ser du 3D -trykknappene.

Knappene har følgende funksjoner:

• Ingen bilder kreves, noe som forbedrer nettstedets hastighet og innsatsen din for å lage bilder.
• Farger og stiler kan enkelt tilpasses for alle typer temaer og oppsett.
• Du kan kontrollere antall knapper i HTML ved hjelp av innebygd kodeelement. Dette betyr at du kan plassere forskjellig antall knapper på forskjellige sider og holde kilden CSS den samme.
• Hver knapp kan kobles til én eller alle sidene på nettstedet ditt.

Hvordan legge til 3D CSS -trykknapper i Weebly?

Vi vil forklare her hvordan du legger til 5 knapper med 3D -stilen ovenfor. Du kan fjerne eller legge til CSS og tilhørende HTML for å legge til eller fjerne knapper og endre farge og stiler.

Trinn 1 – Legge til knapp CSS

Det første trinnet er å bestemme om du bare vil legge til knappene på få sider eller mange sider på nettstedet ditt. Hvis du vil legge til på få sider, legger du bare til CSS -koden på sidene under "Sider> Velg en side> SEO -innstillinger> Overskriftskode" som vist nedenfor:

Legg til topptekst på siden

Hvis du vil legge til knappene på flere sider, anbefales det å legge til CSS -stilene i et eksternt stilark og koble til siden. Weebly har som standard bare ett eksternt stilark per nettsted. Gå til "Tema> Rediger HTML / CSS> Stiler> main.less" -delen. Finn filen og legg til koden nederst i andre eksisterende koder. Lagre endringene og avslutt kodeditoren.

Redigerer hoved CSS -fil i Weebly

Når du bruker kodeditor, må du lagre temaet med et egendefinert navn. Hvis du ikke vil redigere temaet, går du til delen "Innstillinger> SEO> Overskriftskode". Her kan du legge til CSS -koden som skal brukes på alle sider på nettstedet ditt (ligner på redigering av main.less -fil).

Legg til topptekst på Weebly -nettstednivå

Her er CSS -koden for 3D -knapper:

<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ær mer om hvordan du redigerer kilde -CSS / HTML i Weebly.

Trinn 2 – Legge til HTML -kode

Dra og slipp et innebygd kodeelement på en side der du vil legge til knappene og lime inn koden nedenfor. Ikke glem å erstatte # med dine egne lenker.

<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>

Trinn 3 – Tilpasse knappene

Det er uendelige muligheter for å tilpasse knappene etter behov. Her er noen generelle scenarier du kanskje ser etter.

Legge til eller fjerne knapper

Anta at du bare trenger 3 knapper i stedet for 5 som vist i eksemplet. I dette tilfellet kan du slette koden for 4. og 5. knapp fra både CSS og HTML. Men vi vil anbefale å legge til maksimalt antall stiler i CSS og deretter kontrollere antall knapper i HTML. I dette scenariet, der du bare trenger 3 knapper, lar du CSS -koden være slik den har 5 forskjellige stiler definert og bare legge til HTML -kode for 3 knapper.

På denne måten kan du legge til 3 knapper på en side, 5 knapper på en annen side og så videre.

Tilpass farger og størrelser

• Du kan endre tekstfargen og fargen på knappegenskapene som bakgrunn og skygge.
• Endre bredde- og høydeattributtene for å endre rundknappen til oval størrelse eller andre proporsjoner.

Husk at du kan bruke mellomromselement for å legge til nok plass over og under knappene. På samme måte kan du plassere knappen på høyre eller venstre side av et hvilket som helst annet element ved å bruke mellomrom.