У меня есть это изображение кнопки:
Мне было интересно, можно ли сделать простую <a href="">some words</a>
и стильную ссылку, которая будет отображаться как эта кнопка?
Если возможно, как мне это сделать?
У меня есть это изображение кнопки:
Мне было интересно, можно ли сделать простую <a href="">some words</a>
и стильную ссылку, которая будет отображаться как эта кнопка?
Если возможно, как мне это сделать?
cursor: pointer;
css, чтобы курсор выглядел так, как будто он соединяет руку с указательным пальцем, так как это также происходит с обычной кнопкой и является полезным подспорьем для пользователя.
Ответы:
Используя CSS:
.button {
display: block;
width: 115px;
height: 25px;
background: #4E9CAF;
padding: 10px;
text-align: center;
border-radius: 5px;
color: white;
font-weight: bold;
line-height: 25px;
}
<a class="button">Add Problem</a>
a
тегу напрямую ( a {display: block ...}
), что недопустимо. Вы хоть представляете, почему class
атрибут внутри a
тега не работает? :( Я использую Firefox 27. Я тоже пробовал, a.button {...}
но тоже не работает.
text-decoration:none
Проверьте документацию Bootstrap . Класс .btn
существует и работает с a
тегом, но вам нужно добавить определенный .btn-*
класс с .btn
классом.
например: <a class="btn btn-info"></a>
вы можете легко обернуть кнопку такой ссылкой <a href="#"> <button>my button </button> </a>
Примерно так будет напоминать кнопку:
a.LinkButton {
border-style: solid;
border-width : 1px 1px 1px 1px;
text-decoration : none;
padding : 4px;
border-color : #000000
}
См. Пример http://jsfiddle.net/r7v5c/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>
Вы можете использовать href
строку тега оттуда.
<a href="URL" class="btn btn-info" role="button">Button Text</a>
Если вы хотите избежать жесткого кодирования определенного дизайна с помощью CSS, а полагаться на кнопку браузера по умолчанию, вы можете использовать следующий CSS.
a.button {
-webkit-appearance: button;
-moz-appearance: button;
appearance: button;
}
Обратите внимание, что это, вероятно, не будет работать в IE.
appearance: button
не так, как обычная кнопка (по крайней мере, когда я только что проверил Chrome 78).
<a>
в хроме. Протестировал, <span>
и он работал нормально.
Ни один из других ответов не показывает код, в котором кнопка ссылки меняет свой внешний вид при наведении курсора.
Вот что я сделал, чтобы это исправить:
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/
Да, ты можешь это сделать.
Вот пример:
a{
background:IMAGE-URL;
display:block;
height:IMAGE-HEIGHT;
width:IMAGE-WIDTH;
}
Конечно, вы можете изменить приведенный выше пример по своему усмотрению. Важно, чтобы он отображался как блок ( display:block
) или встроенный блок ( display:inline-block
).
Для базового HTML вы можете просто добавить тег img с src, установленным для URL вашего изображения внутри HREF (A)
<a href="http://www.google.com"><img src="http://problemio.com/img/ui/add_problem.png" /></a>
Вы можете создать класс для якорных элементов, которые вы хотите отображать как кнопки.
Например:
Использование изображения:
.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.
Множество стилей и варианты здесь
удачи
У вас есть два варианта согласованности.
.
<button onclick="location.href = 'Homepage.html'; return false;">My Button</button>
return false;
состоит в том, чтобы предотвратить нажатие кнопки по умолчанию.
Просто возьмите обычный дизайн кнопок 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>
для тех, у кого есть проблемы после добавления active и focus, укажите имя класса или идентификатора для вашей кнопки и добавьте его в css
например
// html-код
<button id="aboutus">ABOUT US</button>
// код css
#aboutus{background-color: white;border:none;outline-style: none;}
Протестировано с Chromium 40 и Firefox 36
<a href="url" style="text-decoration:none">
<input type="button" value="click me!"/>
</a>
Попробуйте этот код:
<code>
<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>
</code>
Посмотрите это (он объяснит, как это сделать) - https://youtu.be/euti4HAJJfk