Tämä esimerkki käyttää vain generaattorin säätimiä. Yllä olevat kuvat näyttävät todelliset ladatut tyylitiedostot, jotka on sovellettu tavallisiin HTML-painikkeisiin, eivät kuvakaappauksia editorista.
Avaa CSS-painikkeiden generaattori
Aloita Signature-painikkeella
Avaa CSS-painikkeiden generaattori. Valitse Esiasetukset-kohdasta Signature Everyday-kokoelmasta. Aseta painikkeen tekstiksi ”Get started”. Aseta koodialueella luokan nimeksi cta-button.
Esiasetus korvaa oletus- ja leijuntatyylit, mutta tekstisi ja luokan nimesi säilyvät. Valitse lähtöpisteesi ennen yksityiskohtaisia säätöjä.
Luokan nimi yhdistää CSS-säännöt HTML-painikkeeseesi. Generaattori puhdistaa tukemattomat merkit; käytä lyhyttä ja erottuvaa nimeä välttääksesi muiden elementtien muotoilun.
Luo liukuvärjätty pilleri
Pidä muokkaustila kohdassa Oletus. Valitse Teksti-kohdasta System sans, fonttikoko 18 px ja lihavointi. Pidä valkoinen tekstin väri, normaali tyyli, keskitetty tasaus ja riviväli 1.4.
Valitse Täyttö-kohdasta Lineaarinen liukuväri. Käytä alla olevia kahta väriä ja kulmaa. Aseta vaakasuuntainen täyte 32 px ja pystysuuntainen täyte 16 px. Pidä Muoto-kohdassa Linkitä kaikki kulmat käytössä ja aseta kulman säteeksi 100 px. Reunuksen leveys pysyy 0 px.
Pidä Varjo-kohdassa Laatikon varjo käytössä. Käytä vaakasuuntaista siirtymää 0 px, pystysuuntaista siirtymää 8 px, sumennusta 24 px, levitystä −4 px, väriä #460BD8 ja peittävyyttä 32%. Jätä sisävarjo ja tekstin varjo pois päältä.
Täyte muuttaa tekstin ympärillä olevaa tilaa. Kulman säde muuttaa ääriviivaa. Suuri säde luo tämän pillerin muodon tekemättä tekstistä leveämpää.
Anna leijuntatilalle oma käsittely
Vaihda muokkaustila tilaan Leijunta. Muuta Täyttö-kohdassa taustaväriksi #33099E ja toiseksi väriksi #6D20BF. Pidä liukuvärin kulma 135°:ssa. Muuta Varjo-kohdassa pystysuuntainen siirtymä 10 px:ksi ja sumennus 28 px:ksi. Jätä muut asetukset ennalleen.
Käytä kankaan Oletus-, Leijunta- ja Aktiivinen-painikkeita tarkistaaksesi kunkin tilan. Voit myös viedä hiiren esikatselupainikkeen päälle tai painaa sitä. Vaihda kankaan taustaa vaalean ja tumman välillä tarkistaaksesi reunat ja varjot.
Muokkaustila valitsee, mitä tyylejä muutat. Kankaan tila muuttaa vain sitä, mitä esikatsellaan. Palaa Oletus-muokkaukseen ennen kuin säädät lepotilaa.
Leijuntaominaisuudet, jotka vastaavat edelleen oletusta, seuraavat myöhempiä oletusmuokkauksia. Kun mukautat leijuntaominaisuutta, se pysyy itsenäisenä. Tarkista molemmat tilat uudelleen perustyylin muuttamisen jälkeen.
Vie ja testaa sivullasi
Valitse CSS-välilehti ja käytä Kopioi CSS, tai valitse Lataa tallentaaksesi cta-button.css. Valitse HTML-välilehti ja kopioi vastaava painikkeen merkintä. HTML sisältää saman luokan nimen ja painikkeen, jonka tyyppi on "button".
Lisää CSS tyylitiedostoosi tai linkitä ladattu tiedosto sivultasi. Aseta HTML sinne, missä painikkeen kuuluu olla. Nämä kaksi vientiä toimivat yhdessä: HTML-painike yksinään ei sisällä sen muotoilua.
Avaa sivu ja testaa sen oletus-, leijunta-, näppäimistön kohdistus- ja painetut tilat. Vienti sisältää focus-visible-ääriviivan, pienen aktiivisen liikkeen ja vähennetyn liikkeen säännön. Ympäröivät tyylisi ja asennetut fontit voivat silti vaikuttaa lopputulokseen.
Luotu painike on muotoiltu ohjausobjekti. Yhdistä sen napsautuskäyttäytyminen projektissasi; käytä oikeaa painiketyyppiä, kun lisäät sen lomakkeeseen.
cta-button.css
Ladattu tiedostonimi noudattaa luokan nimeä.
Yleisiä kysymyksiä
Tarvitsenko CSS-kehyksen?
Ei. Tuloste on standardia CSS-koodia sekä tavallinen HTML-painike. Liitä CSS omaan tyylitiedostoosi ja käytä vastaavaa luokkaa painikkeessa.
Tallentaako Lataa myös HTML-tiedoston?
Lataa tallentaa .css-tiedoston, joka on nimetty luokan mukaan. Kopioi painikkeen merkintä erikseen HTML-välilehdeltä.
Voinko antaa jokaiselle kulmalle eri säteen?
Kyllä. Poista Muoto-kohdassa käytöstä Linkitä kaikki kulmat ja aseta sitten Ylävasen, Yläoikea, Alaoikea ja Alavasen itsenäisesti. Tämä esimerkki pitää ne linkitettyinä pillerin muodon vuoksi.
Onko suunnitelmani tallella ensi kerralla?
Studio yrittää tallentaa nykyisen luonnoksen selaimen paikalliseen tallennustilaan. Se ei ole tili tai laitteiden välinen varmuuskopio. Selainasetukset, sivuston tietojen tyhjentäminen tai nollaus voivat poistaa tai korvata sen, joten vie työ, jonka haluat säilyttää.
Ladataanko painikkeeni palvelimelle?
Tyylien esikatselu ja CSS/HTML-luonti tapahtuvat selaimessasi. Editori ei lataa painikkeen tekstiä tai tyyliluonnosta vientiä varten.
Anna seuraavalle painikkeellesi oma tyyli.
Valitse lähtöpiste, säädä yksityiskohdat ja tuo koodi projektiisi.