Как сделать <a href=""> ссылку похожей на кнопку?
345483 просмотра
17 ответа
У меня есть изображение этой кнопки:
Мне было интересно, можно ли было бы сделать так, чтобы простая <a href="">some words</a>
и стилизованная ссылка отображалась как эта кнопка?
Если это возможно, как мне это сделать?
Автор: GeekedOut Источник Размещён: 13.11.2019 11:38Ответы (17)
94 плюса
Используя 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>
98 плюса
Проверьте документы Bootstrap . Класс .btn
существует и работает с a
тегом, но вам необходимо добавить определенный .btn-*
класс с .btn
классом.
например: <a class="btn btn-info"></a>
14 плюса
Примерно так будет похоже на кнопку:
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:3613 плюса
Вы можете легко обернуть кнопку со ссылкой так <a href="#"> <button>my button </button> </a>
9 плюса
Попробуй это:
<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>
Вы можете использовать
href
тег оттуда.<a href="URL" class="btn btn-info" role="button">Button Text</a>
5 плюса
Если вы не хотите жестко программировать конкретный дизайн с помощью css, а предпочитаете кнопку браузера по умолчанию, вы можете использовать следующий код.
a.button {
-webkit-appearance: button;
-moz-appearance: button;
appearance: button;
}
Обратите внимание, что это, вероятно, не будет работать на IE.
Автор: ISBL Размещён: 12.09.2013 04:224 плюса
Ни один из других ответов не показывает код, в котором кнопка ссылки меняет свой вид при наведении курсора.
Вот что я сделал, чтобы это исправить:
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:212 плюса
- Используйте
background-image
свойство CSS в<a>
теге - Установить
display:block
и настроитьwidth
иheight
в CSS
Это должно сделать свое дело.
Автор: dweeves Размещён: 02.12.2011 01:321 плюс
Да, вы можете сделать это.
Вот пример:
a{
background:IMAGE-URL;
display:block;
height:IMAGE-HEIGHT;
width:IMAGE-WIDTH;
}
Конечно, вы можете изменить приведенный выше пример в соответствии с вашими потребностями. Важно, чтобы он отображался в виде блока ( display:block
) или встроенного блока ( display:inline-block
).
1 плюс
Для базового 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
1 плюс
Вы можете создать класс для якорных элементов, которые вы хотели бы отображать в виде кнопок.
Например:
Используя изображение:
.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:381 плюс
Просто возьмите обычные кнопки 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
1 плюс
У вас есть два варианта согласованности.
- Используйте специфичные для фреймворка теги и используйте их по всему сайту.
- Используйте JavaScript, чтобы эмулировать ссылку на элемент кнопки, а затем сделайте так, чтобы кнопка соответствовала внешнему виду кнопок браузера. Эти хаки с CSS-кнопками никогда не будут точными.
,
<button onclick="location.href = 'Homepage.html'; return false;">My Button</button>
return false;
чтобы предотвратить поведение кнопки по умолчанию.
0 плюса
для тех, у кого возникли проблемы после добавления 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
-1 плюса
Протестировано с 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
-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-3 плюса
Все просто:
<a href="#" class="btn btn-success" role="button">link</a>
Просто добавьте "class =" btn btn-success "& роль = кнопка
Автор: lio Размещён: 19.10.2015 01:17Вопросы из категории :
- html Определить часовой пояс пользователя
- html Как определить, какой из указанных шрифтов был использован на веб-странице?
- html Как мне дать моим веб-сайтам значок для iPhone?
- html Как отключить автозаполнение браузера в поле веб-формы / теге ввода?
- html Как автоматически изменить размер текстовой области с помощью Prototype?
- html Как вы можете настроить номера в упорядоченном списке?
- html Прокрутка переполненных DIV с помощью JavaScript
- html Как поместить пробел перед текстом опции в элементе выбора HTML?
- html Есть ли HTML напротив <noscript>?
- html Как я могу найти неиспользуемые изображения и стили CSS на веб-сайте?
- css Создание закругленных углов с помощью CSS
- css Как заставить нижний колонтитул оставаться внизу веб-страницы?
- css Create a variable in .CSS file for use within that .CSS file
- css Как разместить одно изображение поверх другого в HTML?
- css Как я могу отобразить только часть изображения в HTML / CSS?
- css Удалите все классы, начинающиеся с определенной строки.