Как создать кнопку?

Question

Я хочу создать кнопку в HTML. Когда я нажимаю, он должен идти внутрь, а если я нажимаю на него снова, он должен появиться. Как это сделать в CSS?

* БЛАГОДАРЯ 1003 *

Answer 1

Я не думаю, что вы можете с помощью кнопки HTML. У него нет состояний «вверх» и «вниз».

Я думаю, вам нужно использовать флажок, чтобы у вас было два состояния (это HTML-тег ввода с типом флажка). Затем вы можете использовать JavaScript для отображения двух разных изображений над флажком, в зависимости от того, установлен он или нет.

Answer 2

Сначала создайте элемент, который будет действовать как ваш стилизованный элемент:

<span class="toggle">Click!</span>

Теперь вы можете стилизовать этот элемент, как описал Арве Систад:

.toggle {
    padding: 5px;
    background: #DDD;
    border-top: 2px solid #CCC;
    border-left: 2px solid #CCC;
    border-right: 2px solid #555;
    border-bottom: 2px solid #555;
}

.toggle.down {
    border-top: 2px solid #555;
    border-left: 2px solid #555;
    border-right: 2px solid #CCC;
    border-bottom: 2px solid #CCC;
}

Наконец, добавьте функцию переключения, используя javascript (или в моем примере, jQuery ):

$(".toggle").click(function(){
  $(this).toggleClass("down");
});

Если использование javascript является проблемой, вам нужно искать другое решение. Вы можете использовать флажок; этот элемент имеет проверенное и непроверенное состояние само по себе. Тем не менее, вы не сможете использовать один и тот же стиль в каждом браузере; Я даже не знаю, можно ли стилизовать отдельные состояния в IE.

Answer 3

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

button {
      border-width: 1px;
      border-color: white black black white;
      border-style: solid;
}
button:active {
      border-color: black white white black;
}

Answer 4

Вы не можете достичь этого, используя только CSS.

Вам потребуется использовать Javascript для обновления логической переменной, которая хранит состояние кнопки: нажата или отпущена, и соответственно изменить класс css элемента.

См., Например, эту демонстрацию jQuery UI или Как создать кнопку переключения? вопрос по SO.

Answer 5

почему бы вам не попробовать генератор? http://css -button-generator.com /

пример кода вот так ...

<style type="text/css">
.css_btn_class {
    font-size:20px;
    font-family:Arial;
    font-weight:normal;
    -moz-border-radius:8px;
    -webkit-border-radius:8px;
    border-radius:8px;
    border:1px solid #ffaa22;
    padding:16px 38px;
    text-decoration:none;
    background:-webkit-gradient( linear, left top, left bottom, color-stop(5%, #ffec64), color-stop(100%, #ffab23) );
    background:-moz-linear-gradient( center top, #ffec64 5%, #ffab23 100% );
    background:-ms-linear-gradient( top, #ffec64 5%, #ffab23 100% );
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffec64', endColorstr='#ffab23');
    background-color:#ffec64;
    color:#333333;
    display:inline-block;
    text-shadow:1px 1px 0px #ffee66;
    -webkit-box-shadow:inset 1px 1px 0px 0px #fff6af;
    -moz-box-shadow:inset 1px 1px 0px 0px #fff6af;
    box-shadow:inset 1px 1px 0px 0px #fff6af;
}.css_btn_class:hover {
    background:-webkit-gradient( linear, left top, left bottom, color-stop(5%, #ffab23), color-stop(100%, #ffec64) );
    background:-moz-linear-gradient( center top, #ffab23 5%, #ffec64 100% );
    background:-ms-linear-gradient( top, #ffab23 5%, #ffec64 100% );
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffab23', endColorstr='#ffec64');
    background-color:#ffab23;
}.css_btn_class:active {
    position:relative;
    top:1px;
}
/* This css button was generated by css-button-generator.com */
</style>

Answer 6

Дайте ему класс, такой как «кнопка», а затем «инвертируйте» границы: активный. Пример:

.button {
    padding: 5px;
    background: #DDD;
    border-top: 2px solid #CCC;
    border-left: 2px solid #CCC;
    border-right: 2px solid #555;
    border-bottom: 2px solid #555;
}

.button:active {
    border-top: 2px solid #555;
    border-left: 2px solid #555;
    border-right: 2px solid #CCC;
    border-bottom: 2px solid #CCC;
}

выглядит так: http://jsfiddle.net/8wfw3/