Нажатый селектор <button>

Я хотел бы создать button которая меняет свой стиль при нажатии. Это мой код CSS:

button {
    font-size: 18px;
    border: 2px solid gray;
    border-radius: 100px;
    width: 100px;
    height: 100px;
}

button:active {
    font-size: 18px;
    border: 2px solid red;
    border-radius: 100px;
    width: 100px;
    height: 100px;
}

<button>Button</button>

Ответы

Ответ 1

Это можно сделать, если вместо кнопки использовать тег <a>. Я знаю, что это не то, что вы просили, но это может дать вам другие варианты, если вы не можете найти решение для этого:

Заимствование из демонстрации из другого ответа здесь я произвел это:

a {
  display: block;
  font-size: 18px;
  border: 2px solid gray;
  border-radius: 100px;
  width: 100px;
  height: 100px;
  text-align: center;
  line-height: 100px;
}

a:active {
  font-size: 18px;
  border: 2px solid green;
  border-radius: 100px;
  width: 100px;
  height: 100px;
}

a:target {
  font-size: 18px;
  border: 2px solid red;
  border-radius: 100px;
  width: 100px;
  height: 100px;
}

<a id="btn" href="#btn">Demo</a>

Ответ 2

Вы можете использовать :focus, который останется стилем, если пользователь не щелкнет в другом месте.

button:active {
    border: 2px solid green;
}

button:focus {
    border: 2px solid red;
}

Ответ 3

Должны ли мы включить немного JS? Потому что CSS не был в основном создан для этой работы. CSS был просто таблицей стилей для добавления стилей в HTML, но его псевдоклассы могут делать то, что не может сделать базовый CSS. Например button:active активным является псевдо.

Ссылка:

http://css-tricks.com/pseudo-class-selectors/ Вы можете узнать больше о псевдо здесь!

Ваш код:

Код, который у вас есть основной, но полезный. И да :active будет происходить только после запуска события click.

button {
font-size: 18px;
border: 2px solid gray;
border-radius: 100px;
width: 100px;
height: 100px;
}

button:active {
font-size: 18px;
border: 2px solid red;
border-radius: 100px;
width: 100px;
height: 100px;
}

Это то, что CSS будет делать, что rlemon предложил это хорошо, но что бы он предложил бы потребовать a тег.

Как использовать CSS:

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

Что будет делать JS:

Библиотека JavaScript jQuery поможет нам в этом коде. Вот пример:

$('button').click(function () {
  $(this).css('border', '1px solid red');
}

Это будет гарантировать, что кнопка остается красной, даже если щелчок выходит. Чтобы изменить тип фокуса (чтобы изменить цвет красного на другой), вы можете использовать это:

$('button').click(function () {
  $(this).css('border', '1px solid red');
  // find any other button with a specific id, and change it back to white like
  $('button#red').css('border', '1px solid white');
}

Таким образом, вы создадите меню навигации. Который автоматически изменит цвет вкладок при нажатии на них. :)

Надеюсь, вы получите ответ. Удачи! Приветствия.

Ответ 4

Вы можете сделать это с помощью php, если кнопка открывает новую страницу.

Например, если кнопка ссылается на страницу с именем pagename.php as, url: www.website.com/pagename.php, кнопка останется красной, пока вы останетесь на этой странице.

Я взорвал URL '/', получил что-то вроде:

url [0] = pagename.php

<? $url = explode('/', substr($_SERVER['REQUEST_URI'], strpos('/',$_SERVER['REQUEST_URI'] )+1,strlen($_SERVER['REQUEST_URI']))); ?>


<html>
<head>
  <style>
    .btn{
     background:white;
     }
    .btn:hover,
    .btn-on{
     background:red;
     }
  </style>
</head>
<body>
   <a href="/pagename.php" class="btn <? if (url[0]='pagename.php') {echo 'btn-on';} ?>">Click Me</a>
</body>
</html>

Примечание: я не пробовал этот код. Это может потребовать корректировки.

Ответ 5

Может быть, :active над :focus с :hover поможет! Попробуйте

button {
background:lime;
}

button:hover {
background:green;
}

button:focus {
background:gray;
}

button:active {
background:red;
}

Затем:

<button onkeydown="alerted_of_key_pressed()" id="button" title="Test button" href="#button">Demo</button>

Затем:

<!--JAVASCRIPT-->
<script>
function alerted_of_key_pressed() { alert("You pressed a key when hovering over this button.") }
</script>

 Sorry about that last one. :) I was just showing you a cool function! 
Wait... did I just emphasize a code block? This is cool!!!