Bagaimana cara membuat tautan html terlihat seperti tombol?

154

Saya menggunakan ASP.NET, beberapa tombol saya hanya melakukan pengalihan. Saya lebih suka mereka adalah tautan biasa, tetapi saya tidak ingin pengguna saya melihat banyak perbedaan dalam penampilan. Saya menganggap gambar dibungkus oleh jangkar, yaitu tag, tetapi saya tidak ingin harus menyalakan editor gambar setiap kali saya mengubah teks pada tombol.

css button MatthewMartin
sumber
2
Lihat jawaban yang saya terima untuk pertanyaan ini: stackoverflow.com/questions/547222/…
tvanfosson
Anda dapat menggunakan layanan seperti ini untuk menghasilkan CSS untuk Anda setelah Anda mengonfigurasi beberapa aspek (warna, ukuran, font).
Basil Bourque
1
Saya akan menjawab bagaimana melakukannya dengan javascript tetapi pertanyaan tidak memiliki tag "javascript"
ilyaigpetrov
2
@ilyaigpetrov silakan mengirim jawaban. Saya bertanya pada Q 7 tahun lalu dan sepertinya ini adalah masalah umum dan orang-orang membutuhkan berbagai solusi.
MatthewMartin

Jawaban:

213

Terapkan kelas ini ke sana

.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>
Luaskan cuplikan

TStamper
sumber
13
Yang menarik dari hal ini adalah Anda perlu mereproduksi tampilan tombol dengan CSS. Tetapi sayangnya tombol pada browser yang berbeda dan versi browser yang berbeda terlihat berbeda. Jadi Anda harus menerimanya terlihat lucu di beberapa browser, atau memiliki banyak kode untuk mengetahui browser mana dan versi mana yang dimiliki pengguna dan memilih gaya yang berbeda. Yang merupakan banyak masalah, dan bisa merusak waktu berikutnya browser versi baru keluar.
Jay
Ini hanya berfungsi untuk saya jika saya menerapkannya pada atag langsung ( a {display: block ...}), yang tidak dapat diterima. Apakah Anda tahu mengapa classatribut di dalam atag tidak berfungsi? :( Saya menggunakan Firefox 27. Saya juga mencoba a.button {...}dan tidak berhasil.
just_a_girl
1
@Jay kompromi untuk menentukan gaya <input type="submit">dan / atau <button>elemen sehingga mereka tidak menggunakan default browser (jika memungkinkan), dan kemudian mencocokkannya dengan gaya untuk .buttonseperti di atas. Ini akan membantu mengurangi perbedaan, jika tidak menghapusnya sepenuhnya, dan lebih baik daripada metode Anda (tidak dapat diandalkan - seperti yang Anda katakan dengan benar) mengendus jenis dan versi peramban.
Ollie Bennett
@OllieBennett Benar: Anda benar-benar dapat mendefinisikan ulang tampilan tombol. Saya belum mencoba melakukan ini, tidak yakin berapa banyak aspek gaya yang harus Anda timpa. Kedengarannya seperti rasa sakit, tetapi tidak pernah mencobanya, saya tidak bisa mengatakan berapa banyak rasa sakit itu dibandingkan dengan pilihan lain.
Jay
@CraigGjerdingen Saya sangat suka gaya yang Anda gunakan untuk .link_button. Penggunaan CSS3 jelas memperbarui jawaban ini. Juga menggunakan gaya yang kurang seperti tombol browser "biasa", tetapi masih memiliki tombol harga menyelesaikan masalah sniffing browser tanpa (imo) harus juga mendefinisikan kembali gaya untuk<input type="submit">
Evan Donovan
128

Mengapa tidak membungkus jangkar tag di sekitar elemen tombol.

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

Ini akan berfungsi untuk IE9 +, Chrome, Safari, Firefox, dan mungkin Opera.

guanome
sumber
8
@Dean_Wilson mencoba harus memenuhi ie6 :(
Robotnik
@feeel Karena lebih mudah bagi saya untuk mendapatkan tombol yang terlihat konsisten. Jika Anda menggunakan CSS, itu tidak akan memiliki gaya asli. Orang lain sudah memiliki jawaban itu.
guanome
1
Saya suka solusi ini, karena Anda tidak perlu mengutak-atik CSS mencoba meniru gaya tombol peramban asli. Namun, di Firefox saya hanya bisa menggunakannya <button type="button">. Tanpa atribut type, itu akan selalu melakukan postback dan mengabaikan tautan.
Tobias
@Pyitoechito Saya yakin itu karena Chrome dan Safari ada di webkit. Sepertinya itu akan jsfiddle.net/9Gt7y
guanome
31
Nesting <button> dan <a> bukan HTML yang valid dan memiliki perilaku yang tidak terdefinisi. Lihat jawaban terperinci di sini stackoverflow.com/questions/6393827/… Jika berhasil, itu hanya kebetulan.
Odin
36

IMHO, ada solusi yang lebih baik dan lebih elegan. Jika tautan Anda adalah ini:

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

Tombol yang sesuai adalah ini: 

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

Pendekatan ini lebih sederhana karena menggunakan elemen html sederhana, sehingga akan bekerja di semua browser tanpa mengubah apa pun. Selain itu, jika Anda memiliki gaya untuk tombol Anda, solusi ini akan menerapkan gaya yang sama ke tombol baru Anda secara gratis.

Raul Luna
sumber
5
Oke, saya menguji ini hari ini .. dan .. itu bekerja sangat baik jika Anda tidak menggunakan ASP.NET webforms. Formulir web ASP.NET membungkus seluruh halaman dalam bentuk tag dan bentuk bersarang tampaknya tidak berfungsi sama sekali - itu bekerja di luar tag formulir ASP.NET, tetapi itu membatasi penggunaan tautan di bagian paling atas dan bawah.
MatthewMartin
3
Sederhana dan efektif. Anda mungkin ingin menambahkan tampilan: gaya inline ke elemen formulir. Kalau tidak diperlakukan seperti blok yang berbeda dari tombol / jangkar / input.
nimrodm
Pertanyaan bagus. Saya juga tidak berpikir begitu. Tetapi solusi lain yang digambarkan di sini tidak akan berfungsi dengan googlebot, misalnya yang menggunakan tag tombol.
Raul Luna
Saya mencoba ini di Django, tetapi ketika tombol berakhir dalam bentuk lain, itu POST data daripada bertindak sebagai tautan.
wobbily_col
1
Anda juga bisa membuat tombol melakukan redirect di javascript. tapi sekarang ini bukan tautan - tidak dapat "menyalin alamat tautan ke clipboard", klik tengah untuk membuka di tab baru dll, pratinjau target tautan dengan mengarahkan mouse ke mouse dll
Alexander Taylor
27

appearanceProperti CSS3 menyediakan cara sederhana untuk mendesain elemen apa pun (termasuk jangkar) dengan gaya bawaan browser <button>:

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

Trik CSS memiliki garis besar yang bagus dengan detail lebih lanjut tentang ini. Perlu diingat bahwa saat ini tidak ada versi Internet Explorer yang mendukung hal ini sesuai dengan caniuse.com .

Kevin Leary
sumber
5
Ini dijatuhkan dari spec CSS3. htmlvalidator.com/help.php?m=1&h=appearance
user1431356
22 
a {
    display: block;
    height: 20px;
    width: auto;
    border: 1px solid #000;
}

Anda dapat bermain dengan <a>tag seperti ini jika Anda memberi mereka tampilan blok. Anda dapat mengatur batas untuk memberikan efek seperti warna dan warna latar belakang untuk merasakan tombol itu :)

Ólafur Waage
sumber
18

Jika Anda ingin tombol yang bagus dengan sudut membulat, gunakan kelas ini:

.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>
Luaskan cuplikan

rupsray
sumber
3
Saya menambahkan ini dan jawaban peringkat tertinggi ke jsFiddle. Jangan ragu untuk main-main dengan jsfiddle.net/5z6ew1m0/6
Craig Gjerdingen
Anda mungkin ingin menambahkannya marginjuga. Kalau tidak, pekerjaan yang baik styling itu.
c00000fd
3

Seperti yang dikatakan TStamper, Anda bisa menerapkan kelas CSS dan mendesainnya seperti itu. Saat CSS meningkatkan jumlah hal yang dapat Anda lakukan dengan tautan telah menjadi luar biasa, dan sekarang ada kelompok desain yang hanya fokus pada pembuatan tombol CSS yang tampak luar biasa untuk tema, dan sebagainya.

Misalnya, Anda bisa melakukan transisi dengan warna latar menggunakan properti -webkit-transisi dan kelas pseduo. Beberapa desain ini bisa menjadi sangat gila, tetapi memberikan alternatif yang fantastis untuk apa yang mungkin telah dilakukan di masa lalu dengan, katakanlah, flash.

Sebagai contoh (menurut saya ini sangat mengejutkan), http://tympanus.net/Development/CreativeButtons/ (ini adalah serangkaian animasi untuk tombol yang benar-benar out-of-the-box, dengan kode sumber pada halaman asal ). http://www.commentredirect.com/make-awesome-flat-buttons-css/ (sepanjang baris yang sama, tombol-tombol ini memiliki efek transisi yang bagus tapi minimalis, dan mereka menggunakan gaya desain "flat" yang baru.)

tukang kubur
sumber
3

Anda dapat melakukannya dengan JavaScript:

  1. Dapatkan dengan gaya CSS tombol nyata getComputedStyle(realButton).
  2. Terapkan gaya ke semua tautan Anda.

/* 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>
Luaskan cuplikan

ilyaigpetrov
sumber
2

Anda dapat membuat tombol standar, lalu menggunakannya sebagai gambar latar belakang untuk sebuah tautan. Kemudian Anda dapat mengatur teks di tautan tanpa mengubah gambar.

Solusi terbaik jika Anda tidak memiliki tombol yang diberikan khusus adalah dua yang sudah diberikan oleh TStamper dan Ólafur Waage.

cjk
sumber
2

Banyak jawaban yang terlambat:

Saya telah bergulat dengan ini dan mematikan sejak saya mulai bekerja di ASP. Inilah yang terbaik yang saya hasilkan:

Konsep: Saya membuat kontrol khusus yang memiliki tag. Kemudian pada tombol saya meletakkan event onclick yang menetapkan document.location ke nilai yang diinginkan dengan JavaScript.

Saya memanggil tombol kontrol ButtonLink, sehingga saya bisa dengan mudah mendapatkan jika bingung dengan LinkButton.

aspx:

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

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

kode di belakang:

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

Keuntungan dari skema ini: Sepertinya kontrol. Anda menulis satu tag untuk itu, <ButtonLink id = "mybutton" navigateurl = "blahblah" />

Tombol yang dihasilkan adalah tombol HTML "nyata" dan tampak seperti tombol nyata. Anda tidak perlu mencoba mensimulasikan tampilan tombol dengan CSS dan kemudian berjuang dengan tampilan yang berbeda di browser yang berbeda.

Meskipun kemampuannya terbatas, Anda dapat dengan mudah memperluasnya dengan menambahkan lebih banyak properti. Kemungkinan sebagian besar properti hanya perlu "melewati" ke tombol yang mendasarinya, seperti yang saya lakukan untuk teks, diaktifkan dan cssclass.

Jika ada yang punya solusi yang lebih sederhana, lebih bersih atau lebih baik, saya akan senang mendengarnya. Ini menyakitkan, tetapi berhasil.

Jay
sumber
2

Inilah yang saya gunakan. Tombol tautan adalah

<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
sumber
Itu tidak terlihat seperti tombol. Saya tidak tahu siapa yang menurunkan Anda. Berikut ini biola JS untuk kode yang Anda berikan: jsfiddle.net/yajj2x0p
MatthewMartin
2

Bagaimana kalau menggunakan asp: LinkButton?

Anda dapat melakukan itu - saya membuat tombol tautan seperti tombol standar, menggunakan entri TStamper. Menggarisbawahi menunjukkan di bawah teks ketika saya melayang, meskipun, text-decoration: nonepengaturan.

Saya bisa menghentikan garis bawah kursor dengan menambahkan di style="text-decoration: none"dalam tombol tautan:

<asp:LinkButton 
id="btnUpdate" 
CssClass="btnStyleTStamper" 
style="text-decoration: none" 
Text="Update Items"   
Onclick="UpdateGrid"  
runat="server"
/>
Kristen
sumber
Linkbutton menciptakan sesuatu yang terlihat seperti tautan tetapi bertindak seperti tombol. Pertanyaannya menanyakan sebaliknya: sesuatu yang terlihat seperti tombol tetapi bertindak seperti tautan.
Jay
2

Dengan menggunakan properti border, warna, dan warna latar belakang, Anda dapat membuat tautan html mirip tombol!

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>
Luaskan cuplikan

Semoga ini membantu :]

Sree Ramana
sumber
2

Gunakan kelas ini . Itu akan membuat tautan Anda terlihat sama dengan tombol saat diterapkan menggunakan buttonkelas pada atag.

atau

DI SINI ADALAH LAIN 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
sumber
1

Saya menggunakan asp:Button:

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

Dengan cara ini, pengoperasian tombol adalah sepenuhnya sisi klien dan tombol berfungsi seperti tautan ke targetPage.

Manus Hand
sumber
Pekerjaan bagus menunjukkan seperti apa asp:Buttonbentuknya dalam praktik, sehingga dapat membantu pengguna lain!
Pengguna yang bukan pengguna
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>
Luaskan cuplikan


sumber
0

Gunakan cuplikan di bawah ini.

    .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
sumber
0

Tombol css sederhana sekarang Anda dapat bermain-main dengan editor Anda

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 tautan

<a href="#">Hover me<a>
codeuix
sumber
-1

Ini berhasil untuk saya. Itu terlihat seperti tombol dan berperilaku seperti tautan. Anda dapat membookmark misalnya.

<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
sumber