Hej, chcę dodać do mojej strony guzik który przekierowuje na inną stronę. Takiedo kodu użyłem:
<button class="card-btn">Visit<span>→</span></button>
no i oczywiście nigdzie nie prowadzi.
Próbowałem
<button onclick="location.href='http://www.example.com'" type="button">
ale robi tylko kolejny guzik nieładnie wyglądający.
Więc stąd pytanie "Jak można sprawić aby prowadził do innej strony/pliku HTML?".
Najprościej będzie pewnie zrobic linka <a> i wystylowac, żeby wyglądało jak przycisk.
Tyle od strony technicznej. Zastanawiam się jednak, jak to jest od strony użyteczności/UX. Czy powinno się robic linki, które wyglądają jak przyciski?
@LukeJL: chodziło mi o taki guzik.
Tak jest użyteczne bo dobrze wygląda :). Dziękuję za pomoc, bardzo mi to pomogło
Musztardojad napisał(a):
Hej, chcę dodać do mojej strony guzik który przekierowuje na inną stronę. Takiedo kodu użyłem:
<button class="card-btn">Visit<span>→</span></button>no i oczywiście nigdzie nie prowadzi.
Dlatego że domyślnie <button> jeśli nie użyty w formularzu nie robi nic; a jeśli w formularzu to submituje ten formularz.
Próbowałem
<button onclick="location.href='http://www.example.com'" type="button">ale robi tylko kolejny guzik nieładnie wyglądający.
Ładnie czy nie ładnie; to pojęcie względne - ale na pewno jest ostylowane przez przeglądarkę, i na pewno będzie ostylowany inaczej na róznych przeglądarkach.
Więc stąd pytanie "Jak można sprawić aby prowadził do innej strony/pliku HTML?".
A próbowałeś może połaczyć te dwa podejścia? Czyli dodać zarówno onclick jak i class?
Najprościej :)
HTML:
<a class="button01" href="http://www.example.com">Visit →</a>
CSS:
a.button01 {
display: flex;
justify-content: center;
align-items: center;
width: 200px;
font-size: 24px;
line-height: 24px;
text-decoration: none;
color: #000000;
border: 1px solid #000000;
padding: 8px 0;
transition: 0.6s;
}
a.button01:hover {
color: #FFFFFF;
background-color: #FF0000;
}
<input class="button" type="button" value="Filmy SF" onclick="location.href='film/film.htm'">