จะทำให้ลิงก์ <a href= sleepy "> เป็นปุ่มได้อย่างไร?

ฉันมีภาพปุ่มนี้:

ฉันสงสัยว่ามันจะเป็นไปได้ไหมที่จะทำให้<a href="">some words</a>ลิงค์ที่เรียบง่ายและมีสไตล์ปรากฏเป็นปุ่มนั้น?

ถ้าเป็นไปได้ฉันจะทำอย่างไร?

ใช้ 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/

ตรวจสอบเอกสารของเงินทุน มีคลาส.btnอยู่และใช้งานได้กับaแท็ก แต่คุณต้องเพิ่ม.btn-*คลาสเฉพาะด้วย.btnคลาส

เช่น: <a class="btn btn-info"></a>

คุณสามารถห่อปุ่มด้วยลิงค์ได้อย่างง่ายดาย <a href="#"> <button>my button </button> </a>

สิ่งนี้จะคล้ายปุ่ม:

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

ดูhttp://jsfiddle.net/r7v5c/1/สำหรับตัวอย่าง

1. ลองสิ่งนี้:

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

   เรียกใช้ข้อมูลโค้ดซ่อนผลลัพธ์

   ขยายข้อมูลโค้ด

2. คุณสามารถใช้hrefแท็กไลน์จากที่นั่น

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

หากคุณต้องการหลีกเลี่ยงการเข้ารหัสการออกแบบที่เฉพาะเจาะจงด้วย css แต่ให้พึ่งพาปุ่มเริ่มต้นของเบราว์เซอร์คุณสามารถใช้ css ต่อไปนี้

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

สังเกตว่าอาจใช้ไม่ได้กับ IE

ไม่มีคำตอบอื่นใดที่แสดงรหัสที่ปุ่มลิงก์เปลี่ยนลักษณะเมื่อวางเมาส์เหนือ

นี่คือสิ่งที่ฉันได้ทำเพื่อแก้ไข:

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/

• ใช้background-imageคุณสมบัติ CSS บน<a>แท็ก
• ตั้งค่าdisplay:blockและปรับwidthและheightใน CSS

นี้ควรทำเคล็ดลับ

ใช่คุณสามารถทำได้

นี่คือตัวอย่าง:

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

แน่นอนคุณสามารถปรับเปลี่ยนตัวอย่างข้างต้นตามความต้องการของคุณ สิ่งสำคัญคือทำให้มันปรากฏเป็นบล็อก ( display:block) หรือบล็อกแบบอินไลน์ ( display:inline-block)

สำหรับ HTML พื้นฐานคุณสามารถเพิ่มแท็ก img โดยใช้ src ที่กำหนดให้กับ URL รูปภาพของคุณภายใน HREF (A)

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

คุณสามารถสร้างคลาสสำหรับองค์ประกอบจุดยึดที่คุณต้องการแสดงเป็นปุ่ม

เช่น:

การใช้รูปภาพ:

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

หรือใช้วิธี CSS บริสุทธิ์:

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

อย่าลืมซ่อนข้อความด้วยสิ่งต่อไปนี้

text-indent: -9999em;

แกลเลอรีที่ยอดเยี่ยมของปุ่ม CSS ล้วนอยู่ที่นี่ และคุณยังสามารถใช้ตัวสร้างปุ่ม css3

มีสไตล์และตัวเลือกมากมายที่นี่

โชคดี

คุณมีสองทางเลือกสำหรับความสม่ำเสมอ

1. ใช้แท็กเฉพาะสำหรับกรอบงานและใช้ทั่วทั้งเว็บไซต์
2. ใช้ JavaScript เพื่อจำลองลิงก์บนองค์ประกอบปุ่มจากนั้นให้ปุ่มนั้นสอดคล้องกับลักษณะปุ่มของเบราว์เซอร์ การแฮ็กแบบปุ่ม css เหล่านั้นจะไม่แม่นยำ

.

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

return false; คือการป้องกันพฤติกรรมเริ่มต้นของการคลิกปุ่ม

เพียงแค่ใช้การออกแบบปุ่ม css ตามปกติและใช้ CSS นั้นกับลิงก์ (ในลักษณะเดียวกับที่คุณทำกับปุ่ม)

ตัวอย่าง:

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

สำหรับผู้ที่มีปัญหาหลังจากเพิ่ม active และ focus ให้ class หรือ id name ไปที่ปุ่มของคุณแล้วเพิ่มลงใน css

ตัวอย่างเช่น

// รหัส html

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

// รหัส css

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

ทดสอบกับ Chromium 40 และ Firefox 36

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

ลองใช้รหัสนี้:

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

ดูสิ่งนี้ (จะอธิบายวิธีการทำ) - https://youtu.be/euti4HAJJfk

ง่ายๆดังนี้:

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

เพียงเพิ่ม "class =" btn btn-success "& role = button