Как сделать кнопку выглядеть как ссылка?

Мне нужно сделать кнопку похожей на ссылку с помощью CSS. Изменения сделаны, но когда я нажимаю на него, он показывает, как будто он нажат, как в кнопке. Есть идеи, как удалить это, чтобы кнопка работала как ссылка даже при нажатии?

6 212
css back-button hyperlink

6 ответов:

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)

264

код принятого ответа работает в большинстве случаев, но чтобы получить кнопку, которая действительно ведет себя как ссылка, вам нужно немного больше кода. Особенно сложно получить стиль сфокусированных кнопок прямо на 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 для live-demo.

Пожалуйста, обратите внимание, что это относится к якорному стилю по умолчанию для кнопок (например, синий цвет текста). Поэтому, если вы хотите изменить цвет текста или что-нибудь еще из якорей и кнопок, вы должны сделать это после 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;
}
82

Если вы не против использовать twitter bootstrap Я предлагаю вам просто использовать ссылка класс.

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

Я надеюсь, что это поможет кому-то :) хорошего дня!

58

попробуйте использовать 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>

С этим.href вы даже можете получить доступ к цели ссылки в своей функции. return false будет просто предотвратить браузеры от перехода по ссылке при нажатии.

если javascript отключен, ссылка будет работать как обычная ссылка и просто загрузить some/page.php-если вы хотите, чтобы ваша ссылка была умерла когда js отключен, используйте href="#"

4

вы не можете стилизовать кнопки как ссылки надежно во всех браузерах. Я пробовал, но в некоторых браузерах всегда есть какие-то странные проблемы с заполнением, полями или шрифтами. Либо жить с тем, чтобы кнопка выглядела как кнопка, либо использовать onClick и preventDefault по ссылке.

3

Вы можете достичь этого с помощью простого 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>

enter image description here

2