FINÁLNÍ VÝPRODEJ KREDITŮ na ITnetwork je tady. Využij poslední šanci a získej až 80 % extra kreditů ZDARMA na náš interaktivní e-learning. Zjisti více:
NOVINKA: Kurz kybernetické bezpečnosti s akreditací MŠMT, nyní již od 0 Kč. Staň se žádaným profesionálem. Zjisti více:
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
23.1.2015 10:34
Pojem "chyba" neexistuje, je to jen zkušenost, která nás posune v životě!
Avatar
Patrik Smělý
Tvůrce
Avatar
Odpovídá na jan.decker95
Patrik Smělý: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
Avatar
mkub
Tvůrce
Avatar
Odpovídá na Patrik Smělý
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
23.1.2015 12:41
Avatar
Patrik Smělý
Tvůrce
Avatar
Odpovídá na mkub
Patrik Smělý: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
Avatar
mkub
Tvůrce
Avatar
Odpovídá na Patrik Smělý
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
Jan Lupčík
Tvůrce
Avatar
Odpovídá na mkub
Jan Lupčík:23.1.2015 20:06

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

Nahoru Odpovědět
23.1.2015 20:06
TruckersMP vývojář
Avatar
Pavel Mareš
Tvůrce
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
Nahoru Odpovědět
23.1.2015 21:35
Však ono půjde ...
Avatar
Neaktivní uživatel
Tvůrce
Avatar
Odpovídá na Pavel Mareš
Neaktivní uživatel: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
Neaktivní uživatelský účet
Avatar
Pavel Mareš
Tvůrce
Avatar
Odpovídá na Neaktivní uživatel
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
Však ono půjde ...
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.