Как из ссылки сделать кнопки?

Katerina23 · June 10, 2022

Мне из ссылки нужно сделать такие кнопки как на картинке.

Соответственно нужно получить две ссылки одна активная подсвечивается определенным цветом, вторая не активная прозрачная не подсвечивается.

Значит здесь нужно применить два стиля. Наведение мышкой не подходит, так как, эти ссылки будут менять в зависимости от перехода на страницу.

Вот код примера здесь сделано на input’ах мне нужно тоже самое только на ссылках.

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <title></title>
 <link rel="stylesheet" type="text/css" href="style.css"/>

</head>
<body>
<div id="test">
  <form>
    <p id="step1">
      <input name="tech" type="radio" value="computer" id="computer" checked>
      <label for="computer">computer</label>
    </p>
    <p id="step2">
      <input name="tech" type="radio" value="xbox2" id="xbox">
      <label for="xbox">xbox</label>
    </p>
    <p id="step3">
      <input name="tech" type="radio" value="playstation" id="playstation">
      <label for="playstation">playstation</label>
    </p>
    <p id="step4">
      <input name="tech" type="radio" value="Game" id="game">
      <label for="game">Game</label>
    </p>
    <p id="step5">
      <input name="tech" type="radio" value="TV" id="tv">
      <label for="tv">TV</label>
    </p>
  </form>
 
 </div> 

</body>
</html>

Стили:

input{
    display: none;
}

input + label{
    font-size: 14px;
    border: #9c94bb 1px solid;
    width: 130px;
    background-color: #ffffff;
    transition: background-color .3s;
    color: #000000;
    text-align: center;
    padding: 7px 0;
    display: inline-block;
    margin-right: 10px;
}

input:checked + label{
    background: #ece8ff;
}

form{
    display: flex;
}

Vlad_P · June 10, 2022

Так подставьте вместо label - ссылку. ну и задайте ей display: inline-block

Katerina23 · June 11, 2022

Я решила полностью отказатьс от label и создала классы для ссылок и к ним применила, стили.

Sign In

Как из ссылки сделать кнопки?

Question

Katerina23

Link to comment

Share on other sites

2 answers to this question

Recommended Posts

Vlad_P

Link to comment

Share on other sites

Katerina23

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information