Zocial – Ingyenes CSS3 gombkészlet


Manapság általánossá vált közösségi gombok elhelyezése honlapunkon. Ha nem vagy designer egyből az az ötleted támad (legalábbis nekem biztos), hogy keresel egy ingyenes ikonkészletet. De ha ezek túl kicsik és nagyítani szeretnél rajta pixeles lesz.  A héten olvastam egy megoldást ezeknek a gomboknak létrehozására, megjelenítésére ami gyors, ingyenes,  tetszetős és teljesen testreszabható.

A gombkészlet css3-ban íródott, így a régebbi böngészőkben (IE6, IE7) a gombok kinézetébe bele lehet kötni. Itt  a kép alapú alternatívák természetesen szebb megoldásokat jelentenek.

A készlet vektoros ikonokat, illetve egyedi betű készletet használ a gombok megjelenítéséhez.

Jellemzők 

  • 100% vektoros CSS3 gombok
  • @font-face ikonok és egyedi betűkészlet
  • 72 támogatott szolgáltatás
  • Egyedi gombok létrehozása
  • Tetszőleges méretek
  • Kinézet romlás régi böngészőkben

Töltsd le az ingyenes gombkészletet

Kinézet

Zocial   Ingyenes CSS3 gombkészlet zocial screenshot set 11
Zocial   Ingyenes CSS3 gombkészlet zocial screenshot set 21
Zocial   Ingyenes CSS3 gombkészlet zocial screenshot set 31
Zocial   Ingyenes CSS3 gombkészlet zocial screenshot set 41
Zocial   Ingyenes CSS3 gombkészlet zocial screenshot set 51
Zocial   Ingyenes CSS3 gombkészlet zocial screenshot set 61
Zocial   Ingyenes CSS3 gombkészlet zocial screenshot set 71
Zocial   Ingyenes CSS3 gombkészlet zocial screenshot set 81
Zocial   Ingyenes CSS3 gombkészlet zocial screenshot set 91

Használat

Először is be kell kötnünk a leszedett css fájlt.

<link rel="stylesheet" href="css/zocial.css" type="text/css" />

Utána nincs más dolgunk mint megkeresni a megfelelő class-kat és beállítani azokat.

<button class="zocial facebook">Sign in with Facebook</button>
<a class="zocial quora icon">Follow me on Quora</a>

A class-ok csak <div>, <a>  , illetve <button>  tag-kel működnek.

Kapcsolódó bejegyzések:
  • Zocial   Ingyenes CSS3 gombkészlet

    A webdesigner depot-on jelent meg nemrég egy jó kis gyűjtemény 15db HTML5 és CSS3 generátor szolgáltatást felsorolva, amik között vannak tényleg jók és hasznosak …

  • Zocial   Ingyenes CSS3 gombkészlet

    A CSS3 támogatottsága még elég gyatra, főleg IE terén, ezen igyekszik segíteni az alábbi megoldás:Használata.box { -moz-border-radius: 15px; /* …

  • Zocial   Ingyenes CSS3 gombkészlet

    Egyik kedves látogatónk – Orsi – küldte be az alábbi, PDF formátumban letölthető HTML5 és CSS3 összefoglalót.Frissítés: Orsi elküldte mail-ben és a 12., …

  • Zocial   Ingyenes CSS3 gombkészlet

    Megjelent a W3C HTML5 logo hivatalos verziója. Az oldalán (http://www.w3.org/html/logo/) elérhető ahonlapokba illeszthető kód (most már lehet …

  • Zocial   Ingyenes CSS3 gombkészlet

    Te már letöltötted az Adobe Photoshop CS6 legújabb beta verzióját, amit ingyen lehet tesztelni egy korlátozott ideig?Ha nem, kattints az alábbi linkre és töl …

A cikket beküldte: Kilgharrah ()

Szólj hozzá
a Zocial – Ingyenes CSS3 gombkészlet c. bejegyzéshez

- Engedélyezett HTML elemek: <a> <em> <strong> <ul> <ol> <li>
- Forráskód beküldéséhez tedd a kódot ezek közé: <pre lang="php" line="1">Kódrészlet helye itt</pre>