Galerie CSS 3 tlačítek

HTML a CSS Profesionální webdesign Galerie CSS 3 tlačítek

V následujícím článku naleznete několik vybraných stylů tlačítek, které vytvořili webdesigneři z ITnetworku v rámci soutěže. Všechna tlačítka jsou odladěna pro prohlížeče Google Chrome a Mozilla Firefox. Většina z nich obsahuje styl hover, animace a další efekty, kterých dosahují díky využití nových vlastností z CSS 3 specifikace.

HoBi

Několik animovaných tlačítek s plynulým přechodem při stisknutí a radiálním gradientem.

Niveses

Tlačítko vypadající jako klávesa z klávesnice, vzhledu je docíleno pomocí precizního stínování.

Bobanek

Zajímavé rotující tlačítko, vhodné např. k upozornění na určitou akční nabídku.

Girtas

Tlačítko s animovaným hoverem.

Misaz

Pestrobarevná tlačítka vhodná do navigační lišty s povedenou animací.

Prometheus

Povedená hra odlesků dodává tlačítku profesionální vzhled.

Jakub

Jednoduchá tlačítka s nádechem Facebooku.

Slepice1

Osmibitové tlačítko, jako by vypadlo ze hry Minecraft.

fulll

Tlačítko s ikonou play, kompletně vytvořené pomocí CSS 3.

Všechna tlačítka jsou se zdrojovým kódem ke stažení v archivu níže.


 

Stáhnout

Staženo 1814x (101.16 kB)
Aplikace je včetně zdrojových kódů v jazyce CSS

 

  Aktivity (1)

Článek pro vás napsal David Čápka
Avatar
Autor pracuje jako softwarový architekt a pedagog na projektu ITnetwork.cz (a jeho zahraničních verzích). Velmi si váží svobody podnikání v naší zemi a věří, že když se člověk neštítí práce, tak dokáže úplně cokoli.
Unicorn College Autor se informační technologie naučil na Unicorn College - prestižní soukromé vysoké škole IT a ekonomie.

Jak se ti líbí článek?
Celkem (14 hlasů) :
4.928574.928574.928574.928574.92857


 



 

 

Komentáře
Zobrazit starší komentáře (14)

Avatar
vesepav
Člen
Avatar
vesepav:

Kam můžu uvést autora čudlíků ? :-) Nevím ani kam uvést sebe :-). Jinak moc krásný tlačítka děkuji

 
Odpovědět 8.11.2014 7:35
Avatar
vesepav
Člen
Avatar
vesepav:

Mám dotázek, jakpa změním barvu prvních tlačítek od Hobi, chtěl bych oranžovou a okraje šedivé :o), děkují moc autora tam přidám až na to přijdu nemějte mi to za zlé pokud tam zatím nebude jsem začátečník :-) ale moc mě to baví

 
Odpovědět 8.11.2014 8:25
Avatar
Honza Bittner
Redaktor
Avatar
Odpovídá na vesepav
Honza Bittner:

Tlačítko vytváří třída .uni - tu si zkopíruj. Poté na ní je třída s barvou - například .blue, která má i hover. Pro blue tu jsou tyto styly:

.blue{
background: radial-gradient(circle, #17A7BD, #17A7BD);
}

.blue:hover{
background: background: radial-gradient(circle, #38c8ee 10%, #17A7BD 100%);
}

Stačí si udělat tedy svou třídu s barvou - .black .white či tak nějak a nastavit jí na tlačítko. :)

Odpovědět 8.11.2014 9:50
Ptejte se mě na cokoli na https://github.com/HoBi/ama a followujte mě na Twitteru https://twitter.com/tenhobi. :-)
Avatar
vesepav
Člen
Avatar
vesepav:

supr děkují :-))

 
Odpovědět 8.11.2014 12:58
Avatar
Saly
Člen
Avatar
Saly:

Takový dotaz tlačítka Misaz když zazoomujete chrome (CTRL+ +) tak zmizí pozadí ... nevíte jak to opravit ??

 
Odpovědět 27.1.2015 15:53
Avatar
Leonid Cernjak:

<!DOCTYPE>
<html>
<head>
<link href="http://­fonts.googlea­pis.com/css?fa­mily=Press+Star­t+2P&subset=la­tin,greek,latin-ext,cyrillic" rel="stylesheet" type="text/css">
<meta charset="utf-8">
<title>Tech-OS</title>
<style>
@font-face {
font-family: 'press_start_2pre­gular';
src: url('pressstart2p-webfont.eot');
src: url('pressstart2p-webfont.eot?#i­efix') format('embedded-opentype'),
url('pressstart2p-webfont.woff') format('woff'),
url('pressstart2p-webfont.ttf') format('truetype'),
url('pressstart2p-webfont.svg#pres­s_start_2pregu­lar') format('svg');
font-weight: normal;
font-style: normal;

}

button{
height:35px;
width:125px;
border:none;

  • webkit-box-shadow:0px 14px 0px 0px #8A8686;
  • moz-box-shadow:0px 14px 0px 0px #8A8686;

box-shadow:0px 14px 0px 0px #8A8686;
font-family:'press_star­t_2pregular';
font-size:16px;
background-color:#A6A1A1;
}
button:hover{
color:#FFFFFF;
cursor:pointer;
}
button{
height:35px;
width:125px;
border:none;

  • webkit-box-shadow:0px 14px 0px 0px #8A8686;
  • moz-box-shadow:0px 14px 0px 0px #8A8686;

box-shadow:0px 14px 0px 0px #8A8686;
font-family:'press_star­t_2pregular';
font-size:16px;
background-color:#A6A1A1;
}
button:hover{
color:#FFFFFF;
cursor:pointer;
}
button:active{
margin-top:7px;

  • webkit-box-shadow:0px 7px 0px 0px #7C7979;
  • moz-box-shadow:0px 7px 0px 0px #7C7979;

box-shadow:0px 7px 0px 0px #7C7979;
cursor:pointer;
}

</style>
</head>
<body>
<button type="button" onclick=>GOOG­LE!</button>

</body>
</html>

A tady je návod jak to použít v html
nemám autorské práva, tak nemůžu psát články, ale vysvětlit vám to muže někdo odsud, nebo pište do zpráv.

Editováno 9. června 15:19
 
Odpovědět 9. června 15:18
Avatar
Matúš Petrofčík
Šéfredaktor
Avatar
Odpovídá na Leonid Cernjak
Matúš Petrofčík:

Použiť tagy code ťa nenapadlo? :)

[code]
// tvoj kód sem ;)
[/code]

Odpovědět 9. června 16:17
obsah kocky = r^2 ... a preto vlak drnká
Avatar
 
Odpovědět 9. června 16:21
Avatar
Matúš Petrofčík
Šéfredaktor
Avatar
Odpovídá na Leonid Cernjak
Matúš Petrofčík:

A prečo nie?! :O Pozri sa vyššie ako hnusne tvoj príspevok vyzerá, to ti príde OK?

Odpovědět 9. června 16:32
obsah kocky = r^2 ... a preto vlak drnká
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 10 zpráv z 24. Zobrazit vše