ฉันจะทำให้ลิงก์ html ดูเหมือนปุ่มได้อย่างไร

154

ฉันใช้ ASP.NET ปุ่มบางปุ่มของฉันทำการเปลี่ยนเส้นทาง ฉันต้องการเป็นลิงก์ธรรมดา แต่ฉันไม่ต้องการให้ผู้ใช้สังเกตเห็นความแตกต่างในลักษณะที่ปรากฏ ฉันพิจารณารูปภาพที่พันด้วยจุดยึดเช่นแท็ก แต่ฉันไม่ต้องการให้ไฟขึ้นโปรแกรมแก้ไขภาพทุกครั้งที่ฉันเปลี่ยนข้อความบนปุ่ม

css button

— MatthewMartin
แหล่งที่มา

2

ดูคำตอบที่ฉันยอมรับสำหรับคำถามนี้: stackoverflow.com/questions/547222/…

— tvanfosson

คุณสามารถใช้บริการเช่นนี้เพื่อสร้าง CSS สำหรับคุณหลังจากที่คุณกำหนดค่าบางประการ (สี, ขนาด, แบบอักษร)

— Basil Bourque

1

ฉันจะตอบวิธีทำกับ javascript แต่คำถามไม่มีแท็ก "javascript"

— ilyaigpetrov

2

@ilyaigpetrov ไปข้างหน้าและโพสต์คำตอบ ฉันถามคำถามนี้เมื่อ 7 ปีที่แล้วและดูเหมือนว่ามันเป็นปัญหาทั่วไปและผู้คนต้องการโซลูชันที่หลากหลาย

— MatthewMartin

214

ใช้คลาสนี้กับมัน

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

ขยายตัวอย่างข้อมูล

— TStamper
แหล่งที่มา

13

สิ่งที่จับต้องได้คือคุณต้องสร้างรูปลักษณ์ของปุ่มขึ้นมาใหม่ด้วย CSS แต่น่าเสียดายที่ปุ่มบนเบราว์เซอร์ที่แตกต่างกันและเบราว์เซอร์เวอร์ชั่นต่าง ๆ นั้นดูแตกต่างกัน ดังนั้นคุณต้องยอมรับว่ามันดูตลกในเบราว์เซอร์บางตัวหรือมีโค้ดให้เข้าใจว่าเบราว์เซอร์ใดและเวอร์ชั่นใดที่ผู้ใช้มีและเลือกสไตล์ที่แตกต่าง ซึ่งเป็นปัญหาอย่างมากและอาจทำให้ในครั้งต่อไปที่เบราว์เซอร์เวอร์ชันใหม่ออกมา

— Jay

สิ่งนี้ใช้ได้สำหรับฉันเท่านั้นหากฉันใช้กับaแท็กโดยตรง ( a {display: block ...}) ซึ่งไม่เป็นที่ยอมรับ คุณมีความคิดว่าทำไมclassแอตทริบิวต์ภายในaแท็กไม่ทำงาน :( ฉันใช้ Firefox 27 ฉันลองa.button {...}แล้วและมันก็ใช้ไม่ได้เช่นกัน

— just_a_girl

1

@Jay การประนีประนอมอาจเป็นการกำหนดสไตล์<input type="submit">และ / หรือ<button>องค์ประกอบเพื่อไม่ให้ใช้ค่าเริ่มต้นของเบราว์เซอร์ (ถ้าเป็นไปได้) จากนั้นจับคู่สิ่งเหล่านี้กับสไตล์สำหรับ.buttonข้างต้น วิธีนี้จะช่วยลดความแตกต่างหากไม่ลบออกอย่างสมบูรณ์และดีกว่า (ไม่น่าเชื่อถือ - อย่างที่คุณพูด) วิธีในการดมกลิ่นประเภทเบราว์เซอร์และรุ่น

— Ollie Bennett

@OllieBennett จริง: คุณสามารถกำหนดรูปลักษณ์ของปุ่มใหม่ได้อย่างสมบูรณ์ ฉันยังไม่ได้ลองทำสิ่งนี้ แต่ไม่แน่ใจว่าคุณต้องลบล้างลักษณะหลายด้าน ฟังดูเหมือนความเจ็บปวด แต่ไม่ได้ลองฉันไม่สามารถบอกได้ว่ามันเจ็บปวดแค่ไหนเมื่อเทียบกับทางเลือกอื่น ๆ

— Jay

@ CraigGjerdingen ฉันชอบสไตล์ที่คุณใช้สำหรับ. link_button การใช้ CSS3 จะปรับปรุงคำตอบนี้อย่างแน่นอน นอกจากนี้การใช้รูปแบบที่ไม่เหมือนกับปุ่มเบราว์เซอร์ "ปกติ" แต่ยังมีปุ่มที่สามารถแก้ไขปัญหาการดมกลิ่นของเบราว์เซอร์ที่ไม่มี (imo) โดยที่ยังต้องกำหนดรูปแบบใหม่ให้กับ<input type="submit">

— Evan Donovan

128

ทำไมไม่เพียงห่อแท็กสมอรอบองค์ประกอบปุ่ม

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

สิ่งนี้จะใช้ได้กับ IE9 +, Chrome, Safari, Firefox และอาจเป็น Opera

— guanome
แหล่งที่มา

8

@Dean_Wilson พยายามตอบสนอง ie6 :(

— Robotnik

@feeel เพราะมันง่ายกว่าสำหรับฉันที่จะได้รับปุ่มค้นหาที่สอดคล้องกัน หากคุณใช้ CSS มันจะไม่ได้มีการออกแบบในตัว คนอื่นมีคำตอบนั้นอยู่แล้ว

— guanome

1

ฉันชอบโซลูชันนี้เนื่องจากคุณไม่ต้องเล่นซอกับ CSS ที่พยายามเลียนแบบรูปแบบปุ่มของเบราว์เซอร์ดั้งเดิม อย่างไรก็ตามใน Firefox <button type="button">ผมได้รับมันทำงานเฉพาะกับ หากไม่มีแอตทริบิวต์ type มันจะทำ postback และละเว้นการเชื่อมโยงเสมอ

— โทเบียส

@Pyitoechito ฉันแน่ใจว่าจะเป็นเพราะ Chrome และ Safari อยู่ใน webkit ดูเหมือนว่าจะjsfiddle.net/9Gt7y

— guanome

31

การทำ <button> และ <a> นั้นไม่ใช่ HTML ที่ถูกต้องและมีพฤติกรรมที่ไม่ได้กำหนด ดูรายละเอียดคำตอบได้ที่นี่stackoverflow.com/questions/6393827/…ถ้าใช้งานได้มันเป็นเรื่องบังเอิญ

— Odin

36

IMHO มีทางออกที่ดีกว่าและหรูหรากว่า หากลิงก์ของคุณคือ:

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

ปุ่มที่เกี่ยวข้องควรเป็นแบบนี้:

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

วิธีนี้ง่ายกว่าเพราะใช้องค์ประกอบ html แบบง่ายดังนั้นมันจะทำงานในเบราว์เซอร์ทั้งหมดโดยไม่ต้องเปลี่ยนอะไรเลย นอกจากนี้หากคุณมีสไตล์สำหรับปุ่มของคุณโซลูชันนี้จะใช้สไตล์เดียวกันกับปุ่มใหม่ของคุณฟรี

— ราอูลลูน่า
แหล่งที่มา

5

โอเคฉันทดสอบสิ่งนี้ในวันนี้ .. และ .. มันใช้งานได้ดีถ้าคุณไม่ได้ใช้เว็บฟอร์ม ASP.NET webforms ของ ASP.NET ห่อทั้งหน้าในรูปแบบของแท็กและรูปแบบที่ซ้อนกันดูเหมือนจะไม่ทำงานเลย - มันทำงานนอกรูปแบบของ ASP.NET tag แต่นั่นเป็นการ จำกัด การใช้งานของลิงก์ที่ด้านบนและด้านล่าง

— MatthewMartin

3

ง่ายและมีประสิทธิภาพ คุณอาจต้องการเพิ่มการแสดง: สไตล์อินไลน์ให้กับองค์ประกอบของแบบฟอร์ม มิฉะนั้นจะถือว่าเป็นบล็อกที่แตกต่างจากปุ่ม / จุดยึด / อินพุต

— nimrodm

คำถามที่ดี. ฉันไม่คิดอย่างนั้น แต่โซลูชันอื่น ๆ ที่อธิบายที่นี่จะไม่ทำงานกับ googlebot ตัวอย่างเช่นการใช้แท็กปุ่ม

— Raul Luna

ฉันลองมันใน Django แต่เมื่อปุ่มจบลงในรูปแบบอื่นมันโพสต์ข้อมูลแทนที่จะทำหน้าที่เป็นลิงก์

— wobbily_col

1

คุณสามารถทำให้ปุ่มทำการเปลี่ยนเส้นทางใน javascript แต่ตอนนี้ไม่ใช่ลิงก์ - ไม่สามารถ "คัดลอกที่อยู่ลิงก์ไปยังคลิปบอร์ด" คลิกกลางเพื่อเปิดในแท็บใหม่ ฯลฯ ดูตัวอย่างลิงค์เป้าหมายโดยวางเมาส์เหนือเมาส์ ฯลฯ

— Alexander Taylor

27

appearanceคุณสมบัติCSS3 เป็นวิธีที่ง่ายในการกำหนดสไตล์องค์ประกอบ (รวมถึงจุดยึด) ด้วย<button>สไตล์ที่มีอยู่แล้ว

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

<body>
  <a class="btn">CSS Button</a>
</body>

ขยายตัวอย่างข้อมูล

เคล็ดลับ CSSมีโครงร่างที่ดีพร้อมรายละเอียดเพิ่มเติมเกี่ยวกับเรื่องนี้ เก็บไว้ในใจว่ารุ่นของ Internet Explorer ไม่มีขณะนี้สนับสนุนนี้ตามไป caniuse.com

— Kevin Leary
แหล่งที่มา

5

สิ่งนี้ถูกดร็อปจากข้อมูลจำเพาะ CSS3 htmlvalidator.com/help.php?m=1&h=appearance

— user1431356

22

a {
    display: block;
    height: 20px;
    width: auto;
    border: 1px solid #000;
}

คุณสามารถเล่นกับ<a>แท็กแบบนี้ถ้าคุณให้บล็อกแสดง คุณสามารถปรับเส้นขอบเพื่อให้เงาแบบเอฟเฟกต์และสีพื้นหลังสำหรับปุ่มรู้สึก :)

— aflafur Waage
แหล่งที่มา

18

หากคุณต้องการปุ่มดีที่มีมุมโค้งมนให้ใช้คลาสนี้:

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

ขยายตัวอย่างข้อมูล

— rupsray
แหล่งที่มา

3

ฉันเพิ่มสิ่งนี้และคำตอบอันดับสูงสุดให้กับ jsFiddle รู้สึกยุ่งกับjsfiddle.net/5z6ew1m0/6

— Craig Gjerdingen

คุณอาจต้องการเพิ่มmarginมันเข้าไปด้วย มิฉะนั้นงานที่ดีจัดแต่งทรงผมมัน

— c00000fd

3

ดังที่ TStamper กล่าวว่าคุณสามารถใช้คลาส CSS กับมันและออกแบบในลักษณะนั้น ในขณะที่ CSS ปรับปรุงจำนวนของสิ่งที่คุณสามารถทำได้กับการเชื่อมโยงได้กลายเป็นพิเศษและขณะนี้มีกลุ่มการออกแบบที่เพียงแค่มุ่งเน้นการสร้างปุ่ม CSS ที่ดูน่าทึ่งสำหรับธีมและอื่น ๆ

ตัวอย่างเช่นคุณสามารถเปลี่ยนด้วยสีพื้นหลังโดยใช้คุณสมบัติ -webkit-transition และ pseduo-classes การออกแบบเหล่านี้บางอย่างอาจมีประโยชน์มาก แต่มันก็เป็นทางเลือกที่ยอดเยี่ยมสำหรับสิ่งที่อาจเกิดขึ้นในอดีตที่ต้องทำด้วยแฟลช

ตัวอย่างเช่น (สิ่งเหล่านี้เป็นสิ่งที่น่าเหลือเชื่อในความคิดของฉัน), http://tympanus.net/Development/CreativeButtons/ (นี่เป็นชุดของภาพเคลื่อนไหวนอกกรอบทั้งหมดสำหรับปุ่มโดยมีซอร์สโค้ดในหน้าต้นฉบับ ) http://www.commentredirect.com/make-awesome-flat-buttons-css/ (ตามเส้นเดียวกันปุ่มเหล่านี้มีเอฟเฟกต์การเปลี่ยนแปลงที่เรียบง่าย แต่เรียบง่ายและใช้ประโยชน์จากรูปแบบการออกแบบ "แบน" ใหม่)

— graemeboy
แหล่งที่มา

3

คุณสามารถทำได้ด้วย JavaScript:

ได้รับรูปแบบ CSS getComputedStyle(realButton)ปุ่มจริงกับ
ใช้สไตล์กับลิงก์ทั้งหมดของคุณ

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

ขยายตัวอย่างข้อมูล

— ilyaigpetrov
แหล่งที่มา

2

คุณสามารถสร้างปุ่มมาตรฐานจากนั้นใช้เป็นภาพพื้นหลังสำหรับลิงก์ จากนั้นคุณสามารถตั้งค่าข้อความในลิงค์โดยไม่ต้องเปลี่ยนภาพ

ทางออกที่ดีที่สุดหากคุณไม่ได้มีปุ่มการแสดงผลพิเศษคือ TSTamper และÓlafur Waage ที่ได้รับมาสองปุ่ม

— CJK
แหล่งที่มา

2

นี่เป็นรายละเอียดของ CSS อีกเล็กน้อยและให้ภาพบางภาพแก่คุณ:

http://www.dynamicdrive.com/style/csslibrary/item/css_square_buttons/

— GBA
แหล่งที่มา

2

คำตอบล่าช้ามาก:

ฉันต่อสู้กับสิ่งนี้มาตลอดตั้งแต่ครั้งแรกที่ฉันเริ่มทำงานใน ASP นี่คือสิ่งที่ดีที่สุดที่ฉันเคยได้รับ:

แนวคิด: ฉันสร้างการควบคุมแบบกำหนดเองที่มีแท็ก จากนั้นในปุ่มฉันใส่เหตุการณ์ onclick ที่ตั้งค่า document.location เป็นค่าที่ต้องการด้วย JavaScript

ฉันเรียกปุ่มควบคุม ButtonLink เพื่อที่ฉันจะได้สับสนถ้าอย่างนั้นกับ LinkButton

aspx:

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

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

โค้ดด้านหลัง:

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

ข้อดีของชุดรูปแบบนี้: ดูเหมือนตัวควบคุม คุณเขียนแท็กเดียวสำหรับมัน <ButtonLink id = "mybutton" navigateurl = "blahblah" />

ปุ่มผลลัพธ์เป็นปุ่ม HTML "ของจริง" และดูเหมือนกับปุ่มจริง คุณไม่จำเป็นต้องลองจำลองลักษณะของปุ่มด้วย CSS และต่อสู้กับหน้าตาต่าง ๆ บนเบราว์เซอร์ที่แตกต่าง

ในขณะที่ความสามารถมี จำกัด คุณสามารถขยายได้โดยการเพิ่มคุณสมบัติเพิ่มเติม อาจเป็นไปได้ว่าคุณสมบัติส่วนใหญ่จะต้อง "ส่งผ่าน" ไปยังปุ่มที่สำคัญเช่นฉันทำข้อความเปิดใช้งานและ cssclass

หากใครมีวิธีที่ง่ายกว่าสะอาดกว่าหรือดีกว่าฉันยินดีที่จะรับฟัง นี่คือความเจ็บปวด แต่มันได้ผล

— คนโง่
แหล่งที่มา

2

นี่คือสิ่งที่ฉันใช้ ปุ่มลิงค์คือ

<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
แหล่งที่มา

มันดูไม่เหมือนปุ่มเลย ฉันไม่รู้ว่าใครโหวตให้คุณ นี่คือซอ JS สำหรับรหัสที่คุณให้: jsfiddle.net/yajj2x0p

— MatthewMartin

2

วิธีการเกี่ยวกับการใช้ asp: LinkButton

คุณสามารถทำได้ - ฉันสร้าง linkbutton ให้ดูเหมือนปุ่มมาตรฐานโดยใช้รายการของ TStamper การขีดเส้นใต้แสดงภายใต้ข้อความเมื่อฉันโฮเวอร์แม้ว่าจะมีการtext-decoration: noneตั้งค่าก็ตาม

ฉันสามารถหยุดการโฮเวอร์ - ขีดเส้นใต้ได้โดยการเพิ่มstyle="text-decoration: none"ใน linkbutton:

<asp:LinkButton 
id="btnUpdate" 
CssClass="btnStyleTStamper" 
style="text-decoration: none" 
Text="Update Items"   
Onclick="UpdateGrid"  
runat="server"
/>

— คริสเตียน
แหล่งที่มา

Linkbutton สร้างสิ่งที่ดูเหมือนลิงค์ แต่ทำหน้าที่เหมือนปุ่ม คำถามถามตรงข้าม: สิ่งที่ดูเหมือนปุ่ม แต่ทำหน้าที่เหมือนลิงก์

— Jay

2

ด้วยการใช้คุณสมบัติเส้นขอบสีและสีพื้นหลังคุณสามารถสร้างลิงก์ 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>

ขยายตัวอย่างข้อมูล

หวังว่านี่จะช่วยได้:]

— Sree Ramana
แหล่งที่มา

2

ใช้คลาสนี้ มันจะทำให้ลิงค์ของคุณดูเหมือนปุ่มเมื่อนำไปใช้โดยใช้buttonคลาสบนaแท็ก

หรือ

นี่คืออีกตัวอย่างของ 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
แหล่งที่มา

1

ฉันใช้asp:Button:

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

targetPageวิธีนี้การดำเนินงานของปุ่มจะสมบูรณ์ฝั่งไคลเอ็นต์และปุ่มทำหน้าที่เช่นเดียวกับการเชื่อมโยงไปที่

— มือมนัส
แหล่งที่มา

งานที่ดีแสดงให้เห็นว่ามีasp:Buttonลักษณะอย่างไรในทางปฏิบัติดังนั้นจึงสามารถช่วยผู้ใช้รายอื่นได้!

— ผู้ใช้ที่ไม่ใช่ผู้ใช้

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>

ขยายตัวอย่างข้อมูล

0

ใช้ตัวอย่างด้านล่าง

    .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
แหล่งที่มา

0

ปุ่มง่าย css ตอนนี้คุณสามารถเล่นกับแก้ไขของคุณ

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

ลิงก์แท็ก

<a href="#">Hover me<a>

— codeuix
แหล่งที่มา

-1

สิ่งนี้ใช้ได้สำหรับฉัน ดูเหมือนว่าปุ่มและทำงานเหมือนลิงก์ คุณสามารถคั่นหน้ามันได้

<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
แหล่งที่มา

-1

วิธีการเกี่ยวกับการใช้asp: LinkButton ?

— วลาดิมีร์ Kocjancic
แหล่งที่มา

ปุ่มลิงก์แม้จะมีชื่อ แต่ดูเหมือนว่าลิงค์ w3schools.com/aspnet/showasp.asp?filename=demo_linkbutton

— MatthewMartin