Galerie CSS 3 tlačítek

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

ONEbit hosting Unicorn College Tento obsah je dostupný zdarma v rámci projektu IT lidem. Vydávání, hosting a aktualizace umožňují jeho sponzoři.

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 2035x (101.16 kB)
Aplikace je včetně zdrojových kódů v jazyce CSS

 

 

Článek pro vás napsal David Čápka
Avatar
Jak se ti líbí článek?
16 hlasů
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 sítě se informační technologie naučil na Unicorn College - prestižní soukromé vysoké škole IT a ekonomie.
Aktivity (1)

 

 

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

Avatar
Honza Bittner
Šupák
Avatar
Honza Bittner:8.11.2014 9:50

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
Milovník Dartu. Student FIT ČVUT. Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/...
Avatar
vesepav
Člen
Avatar
vesepav:8.11.2014 12:58

supr děkují :-))

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

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:9.6.2016 15:18

<!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.6.2016 15:19
 
Odpovědět 9.6.2016 15:18
Avatar
Odpovídá na Leonid Cernjak
Matúš Petrofčík:9.6.2016 16:17

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

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

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

Nechtěl jsem to použít!

 
Odpovědět 9.6.2016 16:21
Avatar
Odpovídá na Leonid Cernjak
Matúš Petrofčík:9.6.2016 16:32

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

Odpovědět 9.6.2016 16:32
obsah kocky = r^2 ... a preto vlak drnká
Avatar
 
Odpovědět  -1 9.6.2016 16:38
Avatar
wartkor
Člen
Avatar
wartkor:30. ledna 17:29

Ahoj budeme se učit dělat tlačítka ??

Odpovědět 30. ledna 17:29
Káždý jednou začal a neuspěl hned na poprvé
Avatar
IT Man
Redaktor
Avatar
Odpovídá na wartkor
IT Man:30. ledna 17:33

Ahoj, tlačítka se stylují dost podobně jako ostatní elementy. Stáhni si materiály pod článkem a podívej se na to. :)

Odpovědět 30. ledna 17:33
Cokoliv a kdokoliv může jednou uspět.
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 26. Zobrazit vše