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

CSS3 gombkészlet
CSS3 gombkészlet minta
CSS3 gombkészlet részei
Gombok - CSS3
Gombkészlet
ingyenes gombok CSS3-mal
Ingyenes CSS3 gombkészlet
Ingyen gombkészlet CSS3-mal
CSS gombkészlet

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:
  • 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 …

  • 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; /* …

  • 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., …

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

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