Bagaimana cara membuat tautan <a href=””> terlihat seperti tombol?

Saya memiliki gambar tombol ini:

Saya bertanya-tanya apakah mungkin membuat <a href="">some words</a>tautan sederhana dan gaya yang muncul sebagai tombol itu?

Jika memungkinkan, bagaimana cara melakukannya?

Menggunakan CSS:

.button {
    display: block;
    width: 115px;
    height: 25px;
    background: #4E9CAF;
    padding: 10px;
    text-align: center;
    border-radius: 5px;
    color: white;
    font-weight: bold;
    line-height: 25px;
}

<a class="button">Add Problem</a>

http://jsfiddle.net/GCwQu/

Periksa dokumen Bootstrap . Kelas .btnada dan berfungsi dengan atag, tetapi Anda perlu menambahkan .btn-*kelas tertentu dengan.btn kelas tersebut.

misalnya: <a class="btn btn-info"></a>

Anda dapat dengan mudah membungkus tombol dengan tautan seperti itu <a href="#"> <button>my button </button> </a>

Sesuatu seperti ini akan tampak seperti tombol:

a.LinkButton {
  border-style: solid;
  border-width : 1px 1px 1px 1px;
  text-decoration : none;
  padding : 4px;
  border-color : #000000
}

Lihat http://jsfiddle.net/r7v5c/1/ sebagai contoh.

1. Coba ini:

   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
   
   <div class="container">
     <h2>Button Tags</h2>
     <a href="#" class="btn btn-info" role="button">Link Button</a>
     <button type="button" class="btn btn-info">Button</button>
     <input type="button" class="btn btn-info" value="Input Button">
     <input type="submit" class="btn btn-info" value="Submit Button">
   </div>

   Jalankan cuplikan kodeSembunyikan hasil

   Luaskan cuplikan

2. Anda dapat menggunakan hreftag line dari sana.

   <a href="URL" class="btn btn-info" role="button">Button Text</a>

Jika Anda ingin menghindari hard-coding desain tertentu dengan css, tetapi lebih mengandalkan tombol default browser, Anda dapat menggunakan css berikut.

a.button {
  -webkit-appearance: button;
  -moz-appearance: button;
  appearance: button;
}

Perhatikan bahwa ini mungkin tidak akan berfungsi di IE.

Tidak ada jawaban lain yang menunjukkan kode di mana tombol tautan mengubah tampilannya saat mengarahkan kursor.

Inilah yang saya lakukan untuk memperbaikinya:

HTML:

<a href="http://www.google.com" class="link_button2">My button</a>

CSS:

.link_button2 {
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  border: solid 1px #1A4575;
  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: #3A68A1;
  color: #fee1cc;
  text-decoration: none;
  padding: 8px 12px;
  text-decoration: none;
  font-size: larger;
}

a.link_button2:hover {
  text-decoration: underline;
  background: #4479BA;
  border: solid 1px #20538D;

  /* optional different shadow on hover
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.7);
  -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 1px 1px rgba(0, 0, 0, 0.4);
  -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 1px 1px rgba(0, 0, 0, 0.4);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 1px 1px rgba(0, 0, 0, 0.4);
  */

}

JSFiddle: https://jsfiddle.net/adamovic/ovu3k0cj/

• Gunakan background-imageproperti CSS di<a> tag
• Atur display:blockdan sesuaikan widthdan heightdi CSS

Ini seharusnya berhasil.

Ya, Anda bisa melakukan itu.

Berikut ini contohnya:

a{
    background:IMAGE-URL;
    display:block;
    height:IMAGE-HEIGHT;
    width:IMAGE-WIDTH;
}

Tentu saja Anda dapat memodifikasi contoh di atas sesuai kebutuhan Anda. Yang penting adalah membuatnya muncul sebagai blok ( display:block) atau blok sebaris ( display:inline-block).

Untuk HTML biasa, Anda cukup menambahkan tag img dengan src disetel ke URL gambar Anda di dalam HREF (A)

<a href="http://www.google.com"><img src="http://problemio.com/img/ui/add_problem.png" /></a>

Anda dapat membuat kelas untuk elemen jangkar yang ingin Anda tampilkan sebagai tombol.

Misalnya:

Menggunakan gambar:

.button {
   display:block;
   background: url('image');
   width: same as image
   height: same as image
}

atau menggunakan pendekatan CSS murni:

.button {
    background:#E3E3E3;
    border: 1px solid #BBBBBB;
    border-radius: 3px 3px 3px 3px;
}

Selalu ingat untuk menyembunyikan teks dengan sesuatu seperti:

text-indent: -9999em;

Galeri luar biasa dari tombol CSS murni ada di sini dan Anda bahkan dapat menggunakan generator tombol css3

Banyak gaya dan pilihan ada di sini

semoga berhasil

Anda punya dua opsi untuk konsistensi.

1. Gunakan tag khusus kerangka kerja, dan gunakan di seluruh situs web.
2. Gunakan JavaScript untuk meniru tautan pada elemen tombol, lalu buat tombol tersebut konsisten dengan tampilan tombol browser. Peretasan tampilan tombol css itu tidak akan pernah akurat.

.

<button onclick="location.href = 'Homepage.html'; return false;">My Button</button>

return false; adalah untuk mencegah perilaku default dari tombol yang diklik.

Ambil saja desain tombol css biasa, dan terapkan CSS itu ke tautan (dengan cara yang persis sama seperti yang Anda lakukan pada tombol).

Contoh:

<a href="#" class="stylish-button">Some words</a>

<style type="text/css">
.stylish-button {
    -webkit-box-shadow:rgba(0,0,0,0.2) 0 1px 0 0;
    -moz-box-shadow:rgba(0,0,0,0.2) 0 1px 0 0;
    box-shadow:rgba(0,0,0,0.2) 0 1px 0 0;
    color:#333;
    background-color:#FA2;
    border-radius:5px;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
    border:none;
    font-size:16px;
    font-weight:700;
    padding:4px 16px;
    text-shadow:#FE6 0 1px 0
}
</style>

bagi mereka yang mengalami masalah setelah menambahkan aktif dan fokus berikan nama kelas atau id ke tombol Anda dan tambahkan ini ke css

sebagai contoh

// kode html

<button id="aboutus">ABOUT US</button>

// kode css

#aboutus{background-color: white;border:none;outline-style: none;}

Diuji dengan Chromium 40 dan Firefox 36

<a href="url" style="text-decoration:none">
   <input type="button" value="click me!"/>
</a>

Coba kode ini:

<code>

    <a href="#" class="button" > HOME </a>

    <style type="text/css">

        .button { background-color: #00CCFF; padding: 8px 16px; display: inline-block; text-decoration: none; color: #FFFFFF border-radius: 3px;}

        .button:hover { background-color: #0066FF; }

    </style>

</code>

Tonton ini (Ini akan menjelaskan cara melakukannya) - https://youtu.be/euti4HAJJfk

Sesederhana itu:

<a href="#" class="btn btn-success" role="button">link</a>

Cukup tambahkan tombol "class =" btn btn-success "& role =