Ładne "guziki" w czystym HTML/CSS
Ostatnio potrzebowałem na szybko stworzyć "ładne guziki", będące odnośnikami do wartych wyeksponowania części serwisu - jako że elementów takich było by kilka(naście) na łamach całego serwisu i jako iż nie przepadam za stosowaniem grafiki tam, gdzie nie trzeba wymyśliłem coś, co w moich odczuciach jest ładnym guzikiem z zastosowaniem samego HTML i CSS.
Rozwiązanie takie daje mi możliwość zmienienia koloru guzika poprzez łatwą modyfikację 2(4) parametrów w CSS. Przejdźmy do kodu, na początek HTML:
<a href="#" class="fancyButton><span>To jest ładny guzik</span></a>
Jak widać całość jest semantycznie poprawna - ktoś mógłby się upierać, że SPAN nie jest potrzebny i można go wstawić dynamicznie za pomocą CSS, może i można, nie wszędzie działa - starałem by rozwiązanie ładnie się degradowało w starszych przeglądarkach (w IE6 prawie działa).
Koniec dygresji, CSS:
.fancyButton {
background: #0066CC;
border: 1px solid #0066CC;
display: inline-block;
height: 48px;
line-height: 48px;
font: 24px/48px "Trebuchet MS","Trebuchet",Arial,Helvetica,sans-serif;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
.fancyButton:hover {
opacity: 0.7;
-moz-opacity: 0.7;
-webkit-opacity: 0.7;
}
.fancyButton span {
background: #53A9FF;
border: 1px solid #53A9FF;
color: white;
display: block;
text-align: center;
padding: 0px 10px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
height: 50%;
}
Na pierwszy rzut oka widać, że rozwiązanie nie będzie działać w starszych przeglądarkach - do zaokrąglenia używam border-radius, do przeźroczystości opacity - przeglądarki, które nie obsługują tych rozwiązań wyświetlą po prostu dwu-kolorowy prostokąt bez efektu najazdu (można go osiągnąć na sztywno zmieniając kolory w :hover, ale tracimy wygodę zmiany koloru w wielu guzikach na raz).
Demonstracja oraz informacje o degradacji w starszych przeglądarkach
Komentarze
Komentarz użytkownika Dominik Porada
08 03 2010Znacznik zamykający a.fancyButton > span masz lekko niedopisany — popraw (mam na myśli HTML).
Twój guzik mógłby być jeszcze ładniejszy, a sam wpis ciekawszy, gdybyś użył np. gradientów w CSSie albo box-shadow, czy nawet natywną animację. Polecam:
Komentarz użytkownika BTM
08 03 2010Dzięki, poprawione.
Guziki w Twoich rozwiązaniach rzeczywiście są fajne - szczególnie te pierwsze (bo drugie działają w pełni tylko w Safari), ale akurat o inny efekt mi chodziło - glossy buttons czy jak to się tam nazywa.
Tym niemniej - dodanie cieni może poprawić ich prezencję, zobaczymy, czy mi się w design wpiszą ;-)
Komentarz użytkownika BTM
08 03 2010Ah, no i niestety te buttony z przykładu wykorzystują grafikę ;-) Tak, wiem, straszne bo to aż jeden PNG na cały guzik, ale - jak już mówiłem - jak można zrobić coś bez grafiki, to wolę bez (bo mam dwie lewe ręce do Photoshopa ;))
Komentarz użytkownika Dominik Porada
08 03 2010box-shadow można ciekawie użyć jako taki glow effect na hover. :-)
5
Komentarz użytkownika Marcin Kosedowski
08 03 2010Powinno być "To jest ładny guzik ze szkaradnym fontem" :).
A guziki ładne.
6
Komentarz użytkownika Marcin Kosedowski
08 03 2010Chociaż te radioactive buttons podesłane przez Dominika też bardzo mi się podobają.
Sorry za podwójny komentarz, ale masz za karę, że Ci się nie chciało dodać linka do edycji;).
Komentarz użytkownika BTM
08 03 2010Font jak font - mi osobiście podoba - ew. może mamy inne wygładzanie i u Ciebie wygląda inaczej. A podwójny komentarz - wiesz, to taki sprytny sposób na wbicie się na listę najczęściej komentowanych wpisów na Joggerze ;-)
Komentarz użytkownika Dominik Porada
08 03 2010No, ten skrinszot powyżej faktycznie może trochę odstraszać. Zrzut z Safari: http://drp.ly/yqd3 — jak będzie Ci się chciało, możesz wyciąć i podmienić. ;-)
9
Komentarz użytkownika Marcin Kosedowski
08 03 2010To wprowadź ograniczenie do 160 znaków w jednym komentarzu, jak na Twitterze:).
A co do fonta, to mówiłem o tej grafice. W przykładzie jest ok.
10
Komentarz użytkownika Łukasz
08 03 2010"Jeżeli używasz IE6 sam jesteś sobie winien ..." =]
Trzeba przyznać że pojechałeś z tą czcionką na scrennach :D A poza tym, łatwo i szybko a efekt jest.
Komentarz użytkownika BTM
08 03 2010@Marcin: screena robiłem na pracowej Viście z wyłączonym wygładzaniem, w domu na W7 wygląda lepiej ;-)
@Dominik: dzięki, później podmienię.
@Łukasz: na IE nie bardzo działa display: inline-block, przez co guzik jest na całą szerokość, ale jak ktoś na sztywno określi szerokość to degraduje się "znośnie".
Ok, ok, podmienię czcionkę na screenie, dżizas :D
12
Komentarz użytkownika Łukasz
08 03 2010Albo wstaw przykład we wpisie. Wtedy każdy u siebie będzie miał ładną czcionkę "po swojemu" :)
Komentarz użytkownika Livio
08 03 2010Przez te wszystkie HTML5, jego tagi audio i video, czy gradienty, cienie i animacje w CSS, czuję się ponownie tępy w kwestii webdeveloperki. A przez chwilę czułem się w miarę pewnie. Maaamo, dobrze, że się zmienia w tym kierunku, ale czemu znowu trzeba się uczyć czegoś nowego :x ?
Komentarz użytkownika BTM
08 03 2010@Livio: jeżeli chcesz robić na zasadzie "robię i działa" to jeszcze długo nie będziesz <VIDEO> stosował - tak długo, aż wszystkie popularne przeglądarki nie będą go w pełni obsługiwać. Zresztą wiesz - wszystko idzie do przodu, ale nie wszystko się przyjmuje :-)
15
Komentarz użytkownika epi
08 03 2010Fajny pomysł, ale dla mnie lekko nieczytelne. Można by się pokusić o ładny gradiencik :)
Tutaj lekko przerobiona wersja -> http://lukaszjezyna.pl/przerobiony-fancybutton-btma.html
Przy czym zrobiłem tylko wersję dla FF, ale w webkitowych przeglądarkach można to samo uzyskać.
EDIT: link poprawiony :)
16
Komentarz użytkownika Łukasz
08 03 2010epi popraw link.
Komentarz użytkownika Dominik Porada
09 03 2010Epi, a gradient dla WebKitów to gdzie?
Komentarz użytkownika Marsjanin
09 03 2010Buu. Operka mi nie zaokrágla rogów. :( Może 10.50 zaokrągli?
Komentarz użytkownika marc
20 03 2010Brakuje jeszcze ciapka zamykającego w <code>class="fancyButton></code> ;)
