Avatar
jan.decker95
Člen
Avatar
jan.decker95:

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):

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:

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):

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:

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:

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

Nahoru Odpovědět 23.1.2015 20:06
Když nevíš jak dál, podá ti ruku někdo, od koho by jsi to nečekal. A tu šanci musíš přijmout!
Avatar
Pavel Mareš
Redaktor
Avatar
Pavel Mareš:

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
Nechci být workoholik. Bohužel někdy musíme být tím, čím nechceme.
Avatar
Samuel Illo
Redaktor
Avatar
Odpovídá na Pavel Mareš
Samuel Illo :

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; lamka02sk(zavináč)samuelillo.com, www.point.samuelillo.com, www.csgorig.eu
Avatar
Pavel Mareš
Redaktor
Avatar
Odpovídá na Samuel Illo
Pavel Mareš:

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
Nechci být workoholik. Bohužel někdy musíme být tím, čím nechceme.
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.