如何使按钮看起来像一个链接？

6 回答

• 4

  HTML

  <button>your button that looks like a link</button>
  

  CSS

  button {
       background:none!important;
       color:inherit;
       border:none; 
       padding:0!important;
       font: inherit;
       /*border is optional*/
       border-bottom:1px solid #444; 
       cursor: pointer;
  }
  

  参见演示（在JSfiddle上）

  回复于 2024-05-13T03:47:47+08:00
• 3

  接受答案的代码适用于大多数情况，但要获得一个真正像链接一样的按钮，您需要更多代码 . 在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"] 元素 . 如果你只想使某些按钮看起来像锚，你也可以使用一个类 .

  有关实时演示，请参阅this 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;
  }
  

  回复于 2024-05-13T03:47:47+08:00
• 271

  如果您不介意使用twitter bootstrap我建议您只使用link class .

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

  我希望这有助于某人:)祝你有愉快的一天！

  回复于 2024-05-13T03:47:47+08:00
• 61

  尝试使用css伪类 :focus

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

  edit 至于链接和onclick事件使用（你不应该使用内联javascript事件处理程序，但为了简单起见，我将在这里使用它们）：

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

  使用this.href，您甚至可以访问函数中链接的目标 . return false 将阻止浏览器在单击时跟踪链接 .

  如果javascript被禁用，链接将作为普通链接工作，只需加载 some/page.php -如果你希望你的链接在js被禁用时死亡使用 href="#"

  回复于 2024-05-13T03:47:47+08:00
• 82

  您无法在整个浏览器中可靠地将按钮设置为链接 . 我试过了，但在某些浏览器中总会出现一些奇怪的填充，边距或字体问题 . 要么让按钮看起来像一个按钮，要么使用onClick和preventDefault链接 .

  回复于 2024-05-13T03:47:47+08:00
• 2

  您可以使用简单的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>
  

  

  回复于 2024-05-13T03:47:47+08:00