Jak sprawić, by przycisk wyglądał jak link?

287

Muszę sprawić, aby przycisk wyglądał jak link przy użyciu CSS. Zmiany zostały wprowadzone, ale kiedy je kliknę, pokazuje to tak, jakby zostało wciśnięte jak w przycisku. Masz pomysł, jak to usunąć, aby przycisk działał jak link nawet po kliknięciu?

James Hibbard
źródło
4
zdarzenia onclick na linkach są tak proste jak na przyciskach
knittl
2
@knittl, @cletus W rzeczywistości linki i przyciski mają bardzo różne znaczenia w HTML. Powinieneś przeczytać whatwg.org/specs/web-apps/current-work/multipage/… . Może nie być dobrym pomysłem stylizowanie przycisku, aby wyglądał jak link, ale zależy to od projektu interfejsu użytkownika, podczas gdy użycie linku jest niezgodne ze specyfikacjami HTML.
Anton Strogonoff
5
Istnieje kilka powodów, dla których stylizowanie przycisku takiego jak link może być konieczne. (1) przycisk ma typ = „prześlij” (2) przycisk ma fantazyjną stylizację, tj. Obraz tła o zmiennej długości
TJ.
95
Może również być bardziej semantycznie poprawne, aby coś było przyciskiem, nawet jeśli chcesz, aby wyglądało jak link. Wyobraź sobie na przykład parę linków „Rozwiń wszystko | Zwiń wszystko”, które zmieniają coś na stronie. Kliknięcie ich powoduje akcję, ale nigdzie nie prowadzi użytkownika - semantyka dotyczy przycisku. Jednak projektant może mieć określone linki ze względu na wygląd. To właściwie bardzo dobre pytanie.
shacker
17
Używam przycisku zamiast łącza, ponieważ uruchamiając metody JS za pomocą łącza, jestem zmuszony połączyć się, #a następnie użyć event.preventDefault(). To paskudne, jak się łączy javascript:void(0);.
Archonic

Odpowiedzi:

352

button {
  background: none!important;
  border: none;
  padding: 0!important;
  /*optional*/
  font-family: arial, sans-serif;
  /*input has OS specific font-family*/
  color: #069;
  text-decoration: underline;
  cursor: pointer;
}
<button> your button that looks like a link</button>

adardesign
źródło
24
Moja bardzo niewielka odmiana na skrzypcach - przesunąłem dekorację tekstu: podkreśl zasadę, aby działać na przycisk: najechanie myszą. patrz w moje rozwidlone skrzypce .
odedbd
10
Jeśli nie chcesz, aby wszystkie przyciski mają być urządzone jako łącza, zakresu stylu z czymś jak button.link {...styles...}wtedy <button class="link">Your button</button>. Pozwala to również uniknąć używania, !importantco jest zawsze dobrym pomysłem.
Archonic
3
Pamiętaj, aby się zająć outline. Niektóre przeglądarki dodają go do przycisków. Możesz ustawić outline-color: transparent.
SiliconMind
4
Nie usuwaj konturu, ponieważ spowoduje to, że Twój przycisk będzie niedostępny: outlinenone.com
Dominik
4
Zamiast border-bottomużywać text-decoration:underline.
ᴍᴀᴛᴛ ʙᴀᴋᴇʀ
86

Kod akceptowanej odpowiedzi działa w większości przypadków, ale aby uzyskać przycisk, który naprawdę zachowuje się jak link, potrzebujesz trochę więcej kodu. Szczególnie trudne jest uzyskanie stylu skoncentrowanych przycisków bezpośrednio w przeglądarce Firefox (Mozilla).

Poniższy CSS zapewnia, że ​​kotwice i przyciski mają te same właściwości CSS i zachowują się tak samo we wszystkich popularnych przeglądarkach:

button {
  align-items: normal;
  background-color: rgba(0,0,0,0);
  border-color: rgb(0, 0, 238);
  border-style: none;
  box-sizing: content-box;
  color: rgb(0, 0, 238); 
  cursor: pointer;
  display: inline;
  font: inherit;
  height: auto;
  padding: 0;
  perspective-origin: 0 0;
  text-align: start;
  text-decoration: underline;
  transform-origin: 0 0;
  width: auto;
  -moz-appearance: none;
  -webkit-logical-height: 1em; /* Chrome ignores auto, so we have to use this hack to set the correct height  */
  -webkit-logical-width: auto; /* Chrome ignores auto, but here for completeness */
}

/* Mozilla uses a pseudo-element to show focus on buttons, */
/* but anchors are highlighted via the focus pseudo-class. */

@supports (-moz-appearance:none) { /* Mozilla-only */
  button::-moz-focus-inner { /* reset any predefined properties */ 
    border: none;
    padding: 0;
  }
  button:focus { /* add outline to focus pseudo-class */
    outline-style: dotted;
    outline-width: 1px;
  }
}

Powyższy przykład modyfikuje tylko buttonelementy, aby poprawić czytelność, ale można go łatwo rozszerzyć również o modyfikację input[type="button"], input[type="submit"]i input[type="reset"]elementy. Możesz także użyć klasy, jeśli chcesz, aby tylko niektóre przyciski wyglądały jak kotwice.

Zobacz JSFiddle, aby zobaczyć demo na żywo.

Należy również pamiętać, że dotyczy to domyślnego stylu zakotwiczenia przycisków (np. Niebieski kolor tekstu). Więc jeśli chcesz zmienić kolor tekstu lub cokolwiek innego z kotwic i przycisków, powinieneś to zrobić po CSS powyżej.


Oryginalny kod (patrz fragment kodu) w tej odpowiedzi był zupełnie inny i niekompletny.

Torben
źródło
Dlaczego potrzebujesz, outline-offset: 0;jeśli kontur jest ustawiony na Brak?
Mohamad
Musiałem dodać, box-shadow: noneaby wyczyścić całą stylizację na
guziku
Kolejny:text-transform: none;
Shone Tow
75

Jeśli nie masz nic przeciwko użyciu bootstrapu na Twitterze , sugeruję po prostu użyć klasy link .

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<button type="button" class="btn btn-link">Link</button>

Mam nadzieję, że to komuś pomoże :) Miłego dnia!

BoJack Horseman
źródło
7
Działa to świetnie, ale pozostawia trochę dopełnienia w przeciwieństwie do prawdziwego linku <a>. Po prostu dodaj styl wypełnienia: 0! Ważne i jest złoty. Dzięki!
David
Wydaje się, że powoduje to sprawdzenie poprawności formularza przy użyciu sprawdzania poprawności jquery
Paul Becker
To nie jest niezawodne rozwiązanie. Nie tylko subtelnie narusza pionowe wyśrodkowanie, ale pośrednio wyłącza styl tekstu i zmiany rozmiaru czcionki.
Radon Rosborough
5

spróbuj użyć pseudoklasy css :focus

input[type="button"], input[type="button"]:focus {
  /* your style goes here */
}

edytuj jak dla linków i wykorzystania zdarzeń onclick (nie powinieneś używać wbudowanych modułów obsługi zdarzeń javascript, ale dla uproszczenia użyję ich tutaj):

<a href="some/page.php" title="perform some js action" onclick="callFunction(this.href);return false;">watch and learn</a>

Dzięki this.href możesz nawet uzyskać dostęp do celu łącza w swojej funkcji. return falsepo prostu uniemożliwi przeglądarkom klikanie linku.

jeśli javascript jest wyłączony, link będzie działał jak normalny link i po prostu się załaduje - some/page.phpjeśli chcesz, aby twój link był martwy, gdy js jest wyłączony, użyjhref="#"

knittl
źródło
skorzystałbym z niego, ale nie jestem pewien, jakie zmiany zastosować, aby przycisk nie był wcięty.
Tak. N nawet po podaniu paddiny jako 0 wcięcie nadal pozostaje
4

Nie można stylowo określać przycisków jako linków w różnych przeglądarkach. Próbowałem, ale w niektórych przeglądarkach zawsze występują dziwne problemy z dopełnianiem, marginesami lub czcionkami. Albo na żywo, aby przycisk wyglądał jak przycisk, lub użyj onClick i zapobiegnij domyślnemu ustawieniu łącza.

Jacob Rask
źródło
2
Tak było, gdy przeglądarki korzystały z natywnych widżetów. Czy nadal dotyczy to choćby najnowszych przeglądarek?
aij
1
Jest rok 2017, a mój FireFox nadal używa natywnych widżetów.
Michael Scheper,
2

Możesz to osiągnąć za pomocą prostego css, jak pokazano w poniższym przykładzie

button {
    overflow: visible;
    width: auto;
}
button.link {
    font-family: "Verdana" sans-serif;
    font-size: 1em;
    text-align: left;
    color: blue;
    background: none;
    margin: 0;
    padding: 0;
    border: none;
    cursor: pointer;
   
    -moz-user-select: text;
 
    /* override all your button styles here if there are any others */
}
button.link span {
    text-decoration: underline;
}
button.link:hover span,
button.link:focus span {
    color: black;
}
<button type="submit" class="link"><span>Button as Link</span></button>

wprowadź opis zdjęcia tutaj

GSB
źródło