Válí se ti projekty v šuplíku? Dostaň je mezi lidi a získej cool tričko a body na profi IT kurzy v soutěži ITnetwork summer 2017!
Přidej si svou IT školu do profilu a najdi spolužáky zde na síti :)
Avatar
jan.decker95
Člen
Avatar
jan.decker95:23.1.2015 10:34

Ahoj, připravil jsem si pro Vás tvorbu moderních buttonů, protože moderní web se bez nich dnes jen těžce obejde...

Takže začneme klasicky html (bude se jednat o tlačítko ve formulář)i:

<input type="submit" value="Odeslat"/>

a to je celé HTML!

Teď přejdeme do css!

 input[type=submit] {
 background-color: rgba(220,20,60, 0.9); border:0 none;
cursor:pointer;
font-size: 14px;
height: 42px;
width: 120px;
color: white;
margin-top: 10px;
border-radius: 4px;
border-bottom: 2px solid #800000;
}

A budeme chtít, aby se nám tlačítko po najetí myši měnilo... Natavíme hover:

input[type=submit]:hover {
 background-color: rgba(220,20,60, 0.8); border:0 none;

}

Tlačítko můžete volně používat stačí měnit barvy - to snad zvládnete :)
AHOJ!

Odpovědět  +7 23.1.2015 10:34
Pojem "chyba" neexistuje, je to jen zkušenost, která nás posune v životě!
Avatar
Patrik Smělý (SogoCZE)
Tým ITnetwork
Avatar
Odpovídá na jan.decker95
Patrik Smělý (SogoCZE):23.1.2015 11:26

Hezké, ale kdybys to napsal jako článek nebylo by to od věci.

Nahoru Odpovědět 23.1.2015 11:26
PHP můj oblíbený jazyk......
Avatar
mkub
Redaktor
Avatar
Odpovídá na Patrik Smělý (SogoCZE)
mkub:23.1.2015 12:41

clanok na jedno obycajne tlacitko? nemyslim, ze to by bolo dobre...
ale clanok na komplexnejsie veci, resp. na viacero prvkov naraz, to by sa viac oplatilo...

a okrem toho clanok ma aj obmedzenie na pocet pismen odspodku a pridavanie balastu okolo toho si myslim, ze nezlepsi kvalitu clanku

 
Nahoru Odpovědět  +1 23.1.2015 12:41
Avatar
Patrik Smělý (SogoCZE)
Tým ITnetwork
Avatar
Odpovídá na mkub
Patrik Smělý (SogoCZE):23.1.2015 18:04

No, psát to jako příspěvek na fórum kde se řeší problémy, taky není moc dobrý nápad.

Nahoru Odpovědět 23.1.2015 18:04
PHP můj oblíbený jazyk......
Avatar
mkub
Redaktor
Avatar
Odpovídá na Patrik Smělý (SogoCZE)
mkub:23.1.2015 19:06

vytvaranie tlacitiek je skor vhodne v clanku, kde sa riesi graficka uprava danej aplikacie, nie ako samostatny clanok...
mimochodom, podla mna vytvaranie jdneho, jedineho tlacitka je velmi primitivne, kde netreba ziadny clanok

 
Nahoru Odpovědět 23.1.2015 19:06
Avatar
IT Man
Redaktor
Avatar
Odpovídá na mkub
IT Man:23.1.2015 20:06

Nebo je to např. úryvek z nového článku. :)

Nahoru Odpovědět 23.1.2015 20:06
Cokoliv a kdokoliv může jednou uspět.
Avatar
Pavel Mareš
Redaktor
Avatar
Pavel Mareš:23.1.2015 21:35

Nechápu proč je i v hoveru border:0 none;. Hover si primárně přejímá hodnoty z prvku na který je určen. Jinak celkem pěkný a dobrý.

Editováno 23.1.2015 21:36
Nahoru Odpovědět  +1 23.1.2015 21:35
Grafik, Vývojář, Workoholik :)
Avatar
Samuel Illo
Redaktor
Avatar
Odpovídá na Pavel Mareš
Samuel Illo :23.1.2015 21:38

Máš síce pravdu ale on potreboval border pri hoveri odstrániť a to sa dá len tak, že pridá border: 0 none alebo border: none do hoveru :)

Nahoru Odpovědět 23.1.2015 21:38
www.samuelillo.com | www.github.com/lamka02sk
Avatar
Pavel Mareš
Redaktor
Avatar
Odpovídá na Samuel Illo
Pavel Mareš:23.1.2015 22:38

Pokud to zadáš do elementu toho hoveru tak to pak do další pseudo-elementu dávat nemusíš. Přejímá se to automaticky. Pokud je to řešené jinak (globálním nastavením pomocí ccs na buttony), tak to asi nebude to nejsprávnější řešení.

Nahoru Odpovědět 23.1.2015 22:38
Grafik, Vývojář, Workoholik :)
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 9 zpráv z 9.