Làm cách nào để làm cho liên kết <a href= ""> giống như một nút?

Tôi có hình ảnh nút này:

Tôi đã tự hỏi liệu có thể tạo một <a href="">some words</a>liên kết đơn giản và phong cách để xuất hiện dưới dạng nút đó không?

Nếu có thể, tôi phải làm như thế nào?

Sử dụng 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/

Kiểm tra tài liệu của Bootstrap . Một lớp .btntồn tại và hoạt động với athẻ, nhưng bạn cần thêm một .btn-*lớp cụ thể với .btnlớp đó.

ví dụ: <a class="btn btn-info"></a>

bạn có thể dễ dàng bọc một nút bằng một liên kết như vậy <a href="#"> <button>my button </button> </a>

Một cái gì đó như thế này sẽ giống như một nút:

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

Xem http://jsfiddle.net/r7v5c/1/ để làm ví dụ.

1. Thử cái này:

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

   Chạy đoạn mãẨn kết quả

   Mở rộng đoạn mã

2. Bạn có thể sử dụng một hrefdòng thẻ từ đó.

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

Nếu bạn muốn tránh mã hóa cứng một thiết kế cụ thể bằng css, mà dựa vào nút mặc định của trình duyệt, bạn có thể sử dụng css sau.

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

Lưu ý rằng nó có thể sẽ không hoạt động trên IE.

Không có câu trả lời nào khác hiển thị mã nơi nút liên kết thay đổi giao diện của nó khi di chuột.

Đây là những gì tôi đã làm để khắc phục điều đó:

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/

• Sử dụng thuộc tính background-imageCSS trên<a> thẻ
• Đặt display:blockvà điều chỉnh widthvà heighttrong CSS

Cái này cần phải dùng mẹo.

Đúng, bạn có thể làm điều đó.

Đây là một ví dụ:

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

Tất nhiên bạn có thể sửa đổi ví dụ trên theo nhu cầu của bạn. Điều quan trọng là làm cho nó xuất hiện dưới dạng khối ( display:block) hoặc khối nội tuyến ( display:inline-block).

Đối với HTML cơ bản, bạn chỉ có thể thêm thẻ img với bộ src vào URL hình ảnh của mình bên trong HREF (A)

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

Bạn có thể tạo một lớp cho các phần tử neo mà bạn muốn hiển thị dưới dạng các nút.

Ví dụ:

Sử dụng hình ảnh:

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

hoặc sử dụng cách tiếp cận CSS thuần túy:

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

Luôn nhớ ẩn văn bản bằng những thứ như:

text-indent: -9999em;

Một thư viện tuyệt vời về các nút CSS thuần túy có ở đây và bạn thậm chí có thể sử dụng trình tạo nút css3

Có rất nhiều phong cách và sự lựa chọn ở đây

chúc may mắn

Bạn có hai lựa chọn cho sự nhất quán.

1. Sử dụng các thẻ dành riêng cho khung và sử dụng chúng trên toàn bộ trang web.
2. Sử dụng JavaScript để mô phỏng một liên kết trên phần tử nút và sau đó làm cho nút phù hợp với giao diện các nút của trình duyệt. Những hack nhìn bằng nút css đó sẽ không bao giờ chính xác.

.

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

return false; là ngăn chặn hành vi mặc định của nút được nhấp.

Chỉ cần thiết kế nút css thông thường và áp dụng CSS đó cho một liên kết (theo cách giống hệt như cách bạn làm với một nút).

Thí dụ:

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

đối với những người gặp sự cố sau khi thêm hoạt động và tiêu điểm, hãy đặt tên lớp hoặc id cho nút của bạn và thêm tên này vào css

ví dụ

//Mã HTML

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

// mã css

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

Đã thử nghiệm với Chromium 40 và Firefox 36

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

Hãy thử mã này:

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

Xem này (Nó sẽ giải thích cách làm điều đó) - https://youtu.be/euti4HAJJfk

Đơn giản như vậy:

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

Chỉ cần thêm nút "class =" btn btn-success "& role =