วิธีทำให้ปุ่มดูเหมือนลิงค์

ฉันต้องทำให้ปุ่มดูเหมือนลิงค์โดยใช้ CSS การเปลี่ยนแปลงจะเสร็จสิ้น แต่เมื่อฉันคลิกที่มันจะแสดงให้เห็นราวกับว่ามันผลักเหมือนปุ่ม แนวคิดใดที่จะลบออกเพื่อให้ปุ่มทำงานเป็นลิงก์แม้เมื่อคลิก

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

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

button {
  align-items: normal;
  background-color: rgba(0,0,0,0);
  border-color: rgb(0, 0, 238);
  border-style: none;
  box-sizing: content-box;
  color: rgb(0, 0, 238); 
  cursor: pointer;
  display: inline;
  font: inherit;
  height: auto;
  padding: 0;
  perspective-origin: 0 0;
  text-align: start;
  text-decoration: underline;
  transform-origin: 0 0;
  width: auto;
  -moz-appearance: none;
  -webkit-logical-height: 1em; /* Chrome ignores auto, so we have to use this hack to set the correct height  */
  -webkit-logical-width: auto; /* Chrome ignores auto, but here for completeness */
}

/* Mozilla uses a pseudo-element to show focus on buttons, */
/* but anchors are highlighted via the focus pseudo-class. */

@supports (-moz-appearance:none) { /* Mozilla-only */
  button::-moz-focus-inner { /* reset any predefined properties */ 
    border: none;
    padding: 0;
  }
  button:focus { /* add outline to focus pseudo-class */
    outline-style: dotted;
    outline-width: 1px;
  }
}

ตัวอย่างข้างต้นเป็นเพียงการแก้ไขbuttonองค์ประกอบเพื่อปรับปรุงความสามารถในการอ่าน แต่มันสามารถขยายได้อย่างง่ายดายเพื่อแก้ไขinput[type="button"], input[type="submit"]และinput[type="reset"]องค์ประกอบเช่นกัน นอกจากนี้คุณยังสามารถใช้คลาสได้หากคุณต้องการให้ปุ่มบางปุ่มมีลักษณะเหมือนเบรก

ดูJSFiddle นี้สำหรับการสาธิตสด

โปรดทราบว่าสิ่งนี้ใช้การกำหนดค่าสมอยึดเริ่มต้นกับปุ่ม (เช่นข้อความสีฟ้า) ดังนั้นหากคุณต้องการเปลี่ยนสีข้อความหรือปุ่มอื่น ๆ ของแองเคอร์ & ปุ่มคุณควรทำสิ่งนี้หลังจาก CSS ด้านบน

รหัสดั้งเดิม (ดูตัวอย่าง) ในคำตอบนี้แตกต่างอย่างสิ้นเชิงและไม่สมบูรณ์

/* Obsolete code! Please use the code of the updated answer. */

input[type="button"], input[type="button"]:focus, input[type="button"]:active,  
button, button:focus, button:active {
	/* Remove all decorations to look like normal text */
	background: none;
	border: none;
	display: inline;
	font: inherit;
	margin: 0;
	padding: 0;
	outline: none;
	outline-offset: 0;
	/* Additional styles to look like a link */
	color: blue;
	cursor: pointer;
	text-decoration: underline;
}
/* Remove extra space inside buttons in Firefox */
input[type="button"]::-moz-focus-inner,
button::-moz-focus-inner {
    border: none;
    padding: 0;
}

หากคุณไม่ทราบใช้ทวิตเตอร์บูตผมแนะนำให้คุณเพียงแค่ใช้ระดับการเชื่อมโยง

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<button type="button" class="btn btn-link">Link</button>

ฉันหวังว่านี่จะช่วยใครซักคน :) ขอให้มีความสุขมาก ๆ ในวันนี้!

ลองใช้ css pseudoclass :focus

input[type="button"], input[type="button"]:focus {
  /* your style goes here */
}

แก้ไขเป็นลิงก์และกิจกรรม onclick ใช้ (คุณไม่ควรใช้ตัวจัดการเหตุการณ์ javascript แบบอินไลน์ แต่เพื่อความเรียบง่ายฉันจะใช้ที่นี่)

<a href="some/page.php" title="perform some js action" onclick="callFunction(this.href);return false;">watch and learn</a>

ด้วยวิธีนี้คุณสามารถเข้าถึงเป้าหมายของลิงก์ในฟังก์ชันของคุณได้ return falseจะป้องกันไม่ให้เบราว์เซอร์ติดตามลิงก์เมื่อคลิก

หากปิดการใช้งานจาวาสคริปต์ลิงก์จะทำงานเหมือนลิงค์ปกติและโหลดsome/page.phpถ้าคุณต้องการให้ลิงก์ของคุณเสียชีวิตเมื่อ js ถูกปิดการใช้งานhref="#"

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

คุณสามารถทำได้โดยใช้ CSS อย่างง่ายดังแสดงในตัวอย่างด้านล่าง

button {
    overflow: visible;
    width: auto;
}
button.link {
    font-family: "Verdana" sans-serif;
    font-size: 1em;
    text-align: left;
    color: blue;
    background: none;
    margin: 0;
    padding: 0;
    border: none;
    cursor: pointer;
   
    -moz-user-select: text;
 
    /* override all your button styles here if there are any others */
}
button.link span {
    text-decoration: underline;
}
button.link:hover span,
button.link:focus span {
    color: black;
}

<button type="submit" class="link"><span>Button as Link</span></button>