TechBlogSD - Alt for WordPress- og WEB -utvikling
WEB- og WordPress -instruksjoner, nyheter, anmeldelser av temaer og plugins

Hvordan legge til 3D CSS -trykknapper i Weebly?

4

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.

Hvordan legge til 3D CSS -trykknapper i Weebly?

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:

Hvordan legge til 3D CSS -trykknapper i Weebly?

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.

Hvordan legge til 3D CSS -trykknapper i Weebly?

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

Hvordan legge til 3D CSS -trykknapper i Weebly?

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.

Opptakskilde: www.webnots.com
Leave A Reply

Dette nettstedet bruker informasjonskapsler for å forbedre din opplevelse. Vi antar at du er ok med dette, men du kan velge bort det hvis du ønsker det. jeg aksepterer Mer informasjon