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

154

Używam ASP.NET, niektóre z moich przycisków po prostu wykonują przekierowania. Wolałbym, żeby były zwykłymi linkami, ale nie chcę, aby moi użytkownicy zauważyli dużą różnicę w wyglądzie. Rozważałem obrazy zawinięte w kotwice, czyli tagi, ale nie chcę uruchamiać edytora obrazów za każdym razem, gdy zmieniam tekst na przycisku.

css  button 
— MatthewMartin
źródło
2
Zobacz odpowiedź, którą zaakceptowałem na to pytanie: stackoverflow.com/questions/547222/ ...
— tvanfosson
Możesz użyć usługi takiej jak ta, aby wygenerować CSS po skonfigurowaniu kilku aspektów (kolor, rozmiar, czcionka).
— Basil Bourque
1
Odpowiedziałbym, jak to zrobić za pomocą javascript, ale pytanie nie ma tagu „javascript”
— ilyaigpetrov
2
@ilyaigpetrov śmiało i opublikuj odpowiedź. Zadałem to pytanie 7 lat temu i wygląda na to, że jest to powszechny problem, a ludzie potrzebowali różnych rozwiązań.
— MatthewMartin,

Odpowiedzi:

214

Zastosuj do tego tę klasę

.button {
  font: bold 11px Arial;
  text-decoration: none;
  background-color: #EEEEEE;
  color: #333333;
  padding: 2px 6px 2px 6px;
  border-top: 1px solid #CCCCCC;
  border-right: 1px solid #333333;
  border-bottom: 1px solid #333333;
  border-left: 1px solid #CCCCCC;
}
<a href="#" class="button">Example</a>
Rozwiń fragment

— TStamper
źródło
13
Połów w tym polega na tym, że wymaga odtworzenia wyglądu przycisku za pomocą CSS. Ale niestety przyciski w różnych przeglądarkach i różnych wersjach przeglądarek wyglądają inaczej. Więc albo musisz zaakceptować to, że wygląda śmiesznie w niektórych przeglądarkach, albo mieć mnóstwo kodu, aby dowiedzieć się, którą przeglądarkę i jaką wersję ma użytkownik, i wybrać inny styl. Co jest ogromnym problemem i może się zepsuć następnym razem, gdy pojawi się nowa wersja przeglądarki.
— Jay
Działa to tylko wtedy, gdy zastosuję go abezpośrednio do tagu ( a {display: block ...}), co jest niedopuszczalne. Czy masz pojęcie, dlaczego classatrybut wewnątrz atagu nie działa? :( Używam przeglądarki Firefox 27. Próbowałem też a.button {...}i to też nie działa.
— just_a_girl
1
@Jay kompromisem może być zdefiniowanie stylu elementów <input type="submit">i / lub <button>tak, aby nie używały domyślnych ustawień przeglądarki (jeśli to możliwe), a następnie dopasowanie ich do stylów .buttonjak powyżej. Powinno to pomóc zredukować różnice, jeśli nie całkowicie je usunąć, i jest lepsze niż twoja (zawodna - jak słusznie mówisz) metoda wąchania typu i wersji przeglądarki.
— Ollie Bennett
@OllieBennett True: Możesz całkowicie przedefiniować wygląd przycisku. Nie próbowałem tego zrobić, nie jestem pewien, ile aspektów stylu musisz zmienić. Brzmi jak ból, ale nie próbując tego, nie mogę powiedzieć, ile bólu jest w porównaniu z innymi opcjami.
— Jay
@CraigGjerdingen Bardzo podoba mi się style użyte w .link_button. Użycie CSS3 zdecydowanie aktualizuje tę odpowiedź. Również używanie stylów mniej przypominających „zwykłe” przyciski przeglądarki, ale wciąż posiadających afordancję przycisków, rozwiązuje problem węszenia przeglądarki bez konieczności (imo) przedefiniowania stylów dla<input type="submit">
— Evan Donovan
128

Dlaczego po prostu nie owinąć znacznika kotwicy wokół elementu przycisku.

<a href="somepage.html"><button type="button">Text of Some Page</button></a>

To zadziała dla IE9 +, Chrome, Safari, Firefoxa i prawdopodobnie Opery.

— guanome
źródło
8
@Dean_Wilson spróbuj obsługiwać ie6 :(
— Robotnik
@feeel Ponieważ łatwiej było mi uzyskać spójnie wyglądający przycisk. Jeśli używasz CSS, nie będzie miał natywnego stylu. Ktoś inny i tak miał już tę odpowiedź.
— guanome
1
Podoba mi się to rozwiązanie, ponieważ nie musisz majstrować przy CSS, próbując naśladować styl przycisków natywnej przeglądarki. Jednak w Firefoksie mam to działa tylko z <button type="button">. Bez atrybutu type zawsze wykonywałoby ogłaszanie zwrotne i ignorowałby odsyłacz.
— Tobias
@Pyitoechito Jestem pewien, że tak, ponieważ Chrome i Safari są w zestawie internetowym. Wygląda na to, że będzie jsfiddle.net/9Gt7y
— guanome
31
Zagnieżdżenie <button> i <a> nie jest prawidłowym kodem HTML i ma niezdefiniowane zachowanie. Zobacz szczegółową odpowiedź tutaj stackoverflow.com/questions/6393827/… Jeśli to działa, to tylko zbieg okoliczności.
— Odin
36

IMHO, jest lepsze i bardziej eleganckie rozwiązanie. Jeśli twój link jest taki:

<a href="http://www.example.com">Click me!!!</a>

Odpowiedni przycisk powinien wyglądać tak: 

<form method="GET" action="http://www.example.com">
<input type="submit" value="Click me!!!">
</form>

To podejście jest prostsze, ponieważ wykorzystuje proste elementy html, więc będzie działać we wszystkich przeglądarkach bez żadnych zmian. Co więcej, jeśli masz style dla swoich przycisków, to rozwiązanie zastosuje te same style do nowego przycisku za darmo.

— Raul Luna
źródło
5
OK, przetestowałem to dzisiaj ... i ... działa świetnie, jeśli nie używasz formularzy internetowych ASP.NET. ASP.NET webforms opakowuje całą stronę w znacznik formularza, a zagnieżdżone formularze wydają się w ogóle nie działać - działają poza tagiem formularza ASP.NET, ale ogranicza to użycie linków na samej górze i na dole.
— MatthewMartin
3
Proste i skuteczne. Możesz chcieć dodać styl display: do elementu formularza. W przeciwnym razie jest traktowany jak blok inny niż przycisk / kotwica / wejście.
— nimrodm
Dobre pytanie. Ja też tak nie uważam. Ale inne przedstawione tutaj rozwiązania nie będą działać z Googlebotem, na przykład te polegające na użyciu tagu przycisku.
— Raul Luna
Wypróbowałem to w Django, ale ponieważ przycisk znajduje się w innym formularzu, POST dane zamiast działać jako łącze.
— wobbily_col
1
możesz również sprawić, by przycisk wykonywał przekierowanie w javascript. ale teraz nie jest to link - nie można „skopiować adresu linku do schowka”, kliknąć środkowym przyciskiem, aby otworzyć w nowej karcie itp., wyświetlić podgląd celu łącza, najeżdżając na niego myszą itp.
— Alexander Taylor
27

Właściwość CSS3 appearancezapewnia prosty sposób stylizacji dowolnego elementu (w tym kotwicy) za pomocą wbudowanych <button>stylów przeglądarki:

a.btn {
  -webkit-appearance: button;
  -moz-appearance: button;
  appearance: button;
}
<body>
  <a class="btn">CSS Button</a>
</body>
Rozwiń fragment

CSS Tricks ma ładny zarys z większą ilością szczegółów na ten temat. Należy pamiętać, że zgodnie z caniuse.com żadna wersja przeglądarki Internet Explorer nie obsługuje tego obecnie .

— Kevin Leary
źródło
5
Zostało to usunięte ze specyfikacji CSS3. htmlvalidator.com/help.php?m=1&h=appearance
— user1431356
22 
a {
    display: block;
    height: 20px;
    width: auto;
    border: 1px solid #000;
}

Możesz bawić się <a>takimi tagami, jeśli dasz im wyświetlanie blokowe. Możesz dostosować obramowanie, aby uzyskać efekt cienia i kolor tła dla tego przycisku :)

— Ólafur Waage
źródło
18

Jeśli chcesz mieć ładny przycisk z zaokrąglonymi rogami, użyj tej klasy:

.link_button {
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    border: solid 1px #20538D;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.4);
    -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
    background: #4479BA;
    color: #FFF;
    padding: 8px 12px;
    text-decoration: none;
}
<a href="#" class="link_button">Example</a>
Rozwiń fragment

— rupsray
źródło
3
Dodałem tę i najwyższą odpowiedź do pliku jsFiddle. Zapraszam do zabawy
— Craig Gjerdingen
Możesz również dodać margindo niego. W przeciwnym razie, dobra robota.
— c00000fd
3

Jak powiedział TStamper, możesz po prostu zastosować do niego klasę CSS i zaprojektować to w ten sposób. Ponieważ CSS poprawia liczbę rzeczy, które można zrobić z linkami, stało się niezwykłe, a teraz istnieją grupy projektowe, które skupiają się tylko na tworzeniu niesamowicie wyglądających przycisków CSS dla motywów i tak dalej.

Na przykład, możesz przejść z kolorem tła, używając właściwości -webkit-transit i pseduo-classes. Niektóre z tych projektów mogą stać się dość zwariowane, ale stanowią fantastyczną alternatywę dla tego, co w przeszłości musiało być zrobione, powiedzmy, z lampą błyskową.

Na przykład (moim zdaniem są one oszałamiające), http://tympanus.net/Development/CreativeButtons/ (jest to seria całkowicie nieszablonowych animacji przycisków, z kodem źródłowym na stronie źródłowej ). http://www.commentredirect.com/make-awesome-flat-buttons-css/ (te przyciski mają ładne, ale minimalistyczne efekty przejścia i wykorzystują nowy, „płaski” styl projektowania).

— graemeboy
źródło
3

Możesz to zrobić za pomocą JavaScript:

  1. Uzyskaj style CSS prawdziwego przycisku za pomocą getComputedStyle(realButton).
  2. Zastosuj style do wszystkich swoich linków.

/* javascript, after body is loaded */
'use strict';

{ // Namespace starts (to avoid polluting root namespace).
  
  const btnCssText = window.getComputedStyle(
    document.querySelector('.used-for-btn-css-class')
  ).cssText;
  document.querySelectorAll('.btn').forEach(
    (btn) => {
      
      const _d = btn.style.display; // Hidden buttons should stay hidden.
      btn.style.cssText = btnCssText;
      btn.style.display = _d;
      
    }
  );
  
} // Namespace ends.
<body>
  <h3>Button Styled Links</h3>
  <button class="used-for-btn-css-class" style="display: none"></button>
  <a href="//github.io" class="btn">first</a>
  <a href="//github.io" class="btn">second</a>
  <button>real button</button>
  <script>/* You may put JS here. */</script>
</body>
Rozwiń fragment

— ilyaigpetrov
źródło
2

Możesz utworzyć standardowy przycisk, a następnie użyć go jako obrazu tła dla łącza. Następnie możesz ustawić tekst w linku bez zmiany obrazu.

Najlepsze rozwiązania, jeśli nie masz specjalnego renderowanego przycisku, to dwa już podane przez TStamper i Ólafur Waage.

— cjk
źródło
2

Bardzo spóźniona odpowiedź:

Zmagam się z tym z przerwami, odkąd zacząłem pracować w ASP. Oto najlepsze, jakie wymyśliłem:

Koncepcja: tworzę niestandardową kontrolkę, która ma tag. Następnie w przycisku umieszczam zdarzenie onclick, które ustawia document.location na żądaną wartość za pomocą JavaScript.

Nazwałem kontrolkę ButtonLink, aby łatwo uzyskać, jeśli pomyliłem się z LinkButton.

aspx:

<%@ Control Language="VB" AutoEventWireup="false" CodeFile="ButtonLink.ascx.vb" Inherits="controls_ButtonLink" %>

<asp:Button runat="server" ID="button"/>

kod za:

Partial Class controls_ButtonLink
Inherits System.Web.UI.UserControl

Dim _url As String
Dim _confirm As String

Public Property NavigateUrl As String
    Get
        Return _url
    End Get
    Set(value As String)
        _url = value
        BuildJs()
    End Set
End Property
Public Property confirm As String
    Get
        Return _confirm
    End Get
    Set(value As String)
        _confirm = value
        BuildJs()
    End Set
End Property
Public Property Text As String
    Get
        Return button.Text
    End Get
    Set(value As String)
        button.Text = value
    End Set
End Property
Public Property enabled As Boolean
    Get
        Return button.Enabled
    End Get
    Set(value As Boolean)
        button.Enabled = value
    End Set
End Property
Public Property CssClass As String
    Get
        Return button.CssClass
    End Get
    Set(value As String)
        button.CssClass = value
    End Set
End Property

Sub BuildJs()
    ' This is a little kludgey in that if the user gives a url and a confirm message, we'll build the onclick string twice.
    ' But it's not that big a deal.
    If String.IsNullOrEmpty(_url) Then
        button.OnClientClick = Nothing
    ElseIf String.IsNullOrEmpty(_confirm) Then
        button.OnClientClick = String.Format("document.location='{0}';return false;", ResolveClientUrl(_url))
    Else
        button.OnClientClick = String.Format("if (confirm('{0}')) {{document.location='{1}';}} return false;", _confirm, ResolveClientUrl(_url))
    End If
End Sub
End Class

Zalety tego schematu: Wygląda jak kontrola. Piszesz dla niego pojedynczy tag, <ButtonLink id = "mybutton" navigateurl = "blahblah" />

Wynikowy przycisk jest „prawdziwym” przyciskiem HTML, więc wygląda jak prawdziwy przycisk. Nie musisz próbować symulować wyglądu przycisku za pomocą CSS, a następnie zmagać się z różnymi wyglądami w różnych przeglądarkach.

Chociaż zdolności są ograniczone, możesz je łatwo rozszerzyć, dodając więcej właściwości. Jest prawdopodobne, że większość właściwości musiałaby po prostu „przejść” do podstawowego przycisku, tak jak zrobiłem w przypadku text, enabled i cssclass.

Jeśli ktoś ma prostsze, czystsze lub w inny sposób lepsze rozwiązanie, z przyjemnością to usłyszę. To jest uciążliwe, ale działa.

— Sójka
źródło
2

To jest to, czego użyłem. Przycisk linku to

<div class="link-button"><a href="/">Example</a></div>

CSS

/* body is sans-serif */ 

.link-button {
    margin-top:15px;
    max-width:90px;
    background-color:#eee;
    border-color:#888888;
    color:#333;
    display:inline-block;
    vertical-align:middle;
    text-align:center;
    text-decoration:none;
    align-items:flex-start;
    cursor:default;
    -webkit-appearence: push-button;
    border-style: solid;
    border-width: 1px;
    border-radius: 5px;
    font-size: 1em;
    font-family: inherit;
    border-color: #000;
    padding-left: 5px;
    padding-right: 5px;
    width: 100%;
    min-height: 30px;
}

.link-button a {
    margin-top:4px;
    display:inline-block;
    text-decoration:none;
    color:#333;
}

.link-button:hover {
    background-color:#888;
}

.link-button:active {
    background-color:#333;
}

.link-button:hover a, .link-button:active a {
    color:#fff;
}
— Andrew Howden
źródło
Jednak nie wygląda jak przycisk. Nie wiem, kto cię zlekceważył. Oto skrzypce JS dla podanego przez Ciebie kodu: jsfiddle.net/yajj2x0p
— MatthewMartin,
2

A co z użyciem asp: LinkButton?

Możesz to zrobić - sprawiłem, że linkbutton wygląda jak standardowy przycisk, używając wpisu TStamper. Podkreślenie pojawiło się pod tekstem, gdy zawisłem, pomimo text-decoration: noneustawienia.

Udało mi się zatrzymać podkreślanie po najechaniu, dodając style="text-decoration: none"w polu linku:

<asp:LinkButton 
id="btnUpdate" 
CssClass="btnStyleTStamper" 
style="text-decoration: none" 
Text="Update Items"   
Onclick="UpdateGrid"  
runat="server"
/>
— chrześcijanin
źródło
Linkbutton tworzy coś, co wygląda jak link, ale działa jak przycisk. Pytanie dotyczy czegoś przeciwnego: coś, co wygląda jak przycisk, ale działa jak łącze.
— Jay
2

Korzystając z właściwości obramowania, koloru i koloru tła, możesz utworzyć podobny do przycisku link html!

a {
background-color: white;
color: black;
padding: 5px;
text-decoration: none;
border: 1px solid black;
}
a:hover {
background-color: black;
color: white;

}
<a href="https://stackoverflow.com/

">Open StackOverflow</a>
Rozwiń fragment

Mam nadzieję że to pomoże :]

— Sree Ramana
źródło
2

Użyj tej klasy . Dzięki temu Twój link będzie wyglądał tak samo jak przycisk po zastosowaniu buttonklasy w atagu.

lub

OTO KOLEJNE DEMO JSFIDDLE

.button {
    display: inline-block;
    outline: none;
    cursor: pointer;
    border: solid 1px #da7c0c;
    background: #478dad;
    text-align: center;
    text-decoration: none;
    font: 14px/100% Arial, Helvetica, sans-serif;
    padding: .5em 2em .55em;
    text-shadow: 0 1px 1px rgba(0,0,0,.3);
    -webkit-border-radius: .5em; 
    -moz-border-radius: .5em;
    border-radius: .3em;
    -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
    -moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
    box-shadow: 0 1px 2px rgba(0,0,0,.2);
}
.button:hover {
    background: #f47c20;
    background: -webkit-gradient(linear, left top, left bottom, from(#f88e11), to(#f06015));
    background: -moz-linear-gradient(top,  #f88e11,  #f06015);
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#f88e11', endColorstr='#f06015');
}
.button:active {
    position: relative;
    top: 1px;
}
— Muhammad Ashikuzzaman
źródło
1

Używam asp:Button:

<asp:Button runat="server"
            OnClientClick="return location='targetPage', true;"
            UseSubmitBehavior="False"
            Text="Button Text Here"
/>

W ten sposób działanie przycisku jest całkowicie po stronie klienta, a przycisk działa jak łącze do pliku targetPage.

— Manus Hand
źródło
Dobra robota, pokazując, jak asp:Buttonwygląda w praktyce, aby pomóc innym użytkownikom!
— Użytkownik, który nie jest użytkownikiem,
0 

.button {
  font: bold 11px Arial;
  text-decoration: none;
  background-color: #EEEEEE;
  color: #333333;
  padding: 2px 6px 2px 6px;
  border-top: 1px solid #CCCCCC;
  border-right: 1px solid #333333;
  border-bottom: 1px solid #333333;
  border-left: 1px solid #CCCCCC;
}
<a href="#" class="button">Example</a>
Rozwiń fragment

0

Użyj poniższego fragmentu.

    .a{
  color: $brn-acc-clr;
  background-color: transparent;
  border-color: #888888;

  &:hover:active{
    outline: none;
    color: #888888;
    border-color: #888888;
  }
  &:fill{
    background-color: #888888;
    color: #fff;
    box-shadow: 0 3px 10px rgba(#888888, 0.5);
    &:hover:active{
      color: #fff;
    }
    &:hover:not(:disabled){
      transform: translateY(-2px);
      background-color: darken(#888888, 4);
    }
  }
}
— Himadri Mandal
źródło
0

Prosty przycisk css teraz możesz bawić się swoim edytorem

a {
  display: inline-block;
  background: #000000c9;
  color: #000;
  padding: 12px 24px;
  text-align: center;
  text-decoration: none;
  font-size: 16px;
  cursor: pointer;
}
a:hover {
  background:#000
  cursor: pointer;
  transition: 0.3s ease-in;
}

Tag linku

<a href="#">Hover me<a>
— codeuix
źródło
-1

To zadziałało dla mnie. Wygląda jak przycisk i zachowuje się jak link. Możesz na przykład dodać zakładkę.

<a href="mypage.aspx?param1=1" style="text-decoration:none;">
    <asp:Button PostBackUrl="mypage.aspx?param1=1" Text="my button-like link" runat="server" />
</a>
— Andrej Adamenko
źródło
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.