some wordsи стилизованная ссылка отображалась как эта кнопка?Если это возможно, как мне это сделать?" />
Вопрос:

Как сделать <a href=""> ссылку похожей на кнопку?

html css

345483 просмотра

17 ответа

7376 Репутация автора

У меня есть изображение этой кнопки:
введите описание изображения здесь

Мне было интересно, можно ли было бы сделать так, чтобы простая <a href="">some words</a>и стилизованная ссылка отображалась как эта кнопка?

Если это возможно, как мне это сделать?

Автор: GeekedOut Источник Размещён: 02.12.2011 01:30

Ответы (17)


2 плюса

4754 Репутация автора

  • Используйте background-imageсвойство CSS в <a>теге
  • Установить display:blockи настроить widthи heightв CSS

Это должно сделать свое дело.

Автор: dweeves Размещён: 02.12.2011 01:32

1 плюс

3812 Репутация автора

Да, вы можете сделать это.

Вот пример:

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

Конечно, вы можете изменить приведенный выше пример в соответствии с вашими потребностями. Важно, чтобы он отображался в виде блока ( display:block) или встроенного блока ( display:inline-block).

Автор: r0skar Размещён: 02.12.2011 01:33

13 плюса

583 Репутация автора

Вы можете легко обернуть кнопку со ссылкой так <a href="#"> <button>my button </button> </a>

Автор: Antagonist Размещён: 02.12.2011 01:33

1 плюс

4511 Репутация автора

Для базового HTML вы можете просто добавить тег img с установленным src в URL вашего изображения внутри HREF (A)

<a href="http://www.google.com"><img src="http://problemio.com/img/ui/add_problem.png" /></a>
Автор: msmucker0527 Размещён: 02.12.2011 01:35

14 плюса

76693 Репутация автора

Примерно так будет похоже на кнопку:

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

См. Http://jsfiddle.net/r7v5c/1/ для примера.

Автор: dash Размещён: 02.12.2011 01:36

1 плюс

499 Репутация автора

Вы можете создать класс для якорных элементов, которые вы хотели бы отображать в виде кнопок.

Например:

Используя изображение:

.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

Множество стилей и вариантов здесь

удачи

Автор: Rdpi Размещён: 02.12.2011 01:38

94 плюса

5234 Репутация автора

Решение

Используя CSS:

.button {
    display: block;
    width: 115px;
    height: 25px;
    background: #4E9CAF;
    padding: 10px;
    text-align: center;
    border-radius: 5px;
    color: white;
    font-weight: bold;
}
<a class="button">Add Problem</a>

http://jsfiddle.net/GCwQu/

Автор: Declan Cook Размещён: 02.12.2011 01:42

98 плюса

2129 Репутация автора

Проверьте документы Bootstrap . Класс .btnсуществует и работает с aтегом, но вам необходимо добавить определенный .btn-*класс с .btnклассом.

например: <a class="btn btn-info"></a>

Автор: Gildas Ross Размещён: 02.12.2011 02:05

1 плюс

557 Репутация автора

Просто возьмите обычные кнопки 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>
Автор: graemeboy Размещён: 06.07.2012 04:29

5 плюса

661 Репутация автора

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

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

Обратите внимание, что это, вероятно, не будет работать на IE.

Автор: ISBL Размещён: 12.09.2013 04:22

9 плюса

91 Репутация автора

  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>
    
Автор: Sleepy B Размещён: 13.02.2015 01:30

-1 плюса

25 Репутация автора

Протестировано с Chromium 40 и Firefox 36

<a href="url" style="text-decoration:none">
   <input type="button" value="click me!"/>
</a>
Автор: Franz Fankhauser Размещён: 02.03.2015 10:20

-3 плюса

107 Репутация автора

Все просто:

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

Просто добавьте "class =" btn btn-success "& роль = кнопка

Автор: lio Размещён: 19.10.2015 01:17

4 плюса

1861 Репутация автора

Ни один из других ответов не показывает код, в котором кнопка ссылки меняет свой вид при наведении курсора.

Вот что я сделал, чтобы это исправить:

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/

Автор: Mladen Adamovic Размещён: 29.01.2016 10:21

-1 плюса

1 Репутация автора

Попробуйте этот код:



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


Смотрите это (это объяснит, как это сделать) - https://youtu.be/euti4HAJJfk

Автор: D.Madhushan Размещён: 27.08.2017 02:18

1 плюс

3241 Репутация автора

У вас есть два варианта согласованности.

  1. Используйте специфичные для фреймворка теги и используйте их по всему сайту.
  2. Используйте JavaScript, чтобы эмулировать ссылку на элемент кнопки, а затем сделайте так, чтобы кнопка соответствовала внешнему виду кнопок браузера. Эти хаки с CSS-кнопками никогда не будут точными.

,

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

return false; чтобы предотвратить поведение кнопки по умолчанию.

Автор: Ghasan Размещён: 07.12.2017 07:20

0 плюса

1 Репутация автора

для тех, у кого возникли проблемы после добавления active и focus, укажите имя класса или id для вашей кнопки и добавьте это в css

например

// HTML-код

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

// код CSS

#aboutus{background-color: white;border:none;outline-style: none;}
Автор: Subham choudhary Размещён: 13.08.2019 07:26
Вопросы из категории :
32x32