[Resolvido] Transformar <li> em botão.

[StompShow]

Criei uma <li> e estilizei ela porem quando transformei em botão a mesma não preencheu toda a <li>

.list {
    color: #eee;
    list-style: none;
    padding-left: 0px;
}
li:nth-child(odd) {
    background-color:#13171d;
}
li>i {margin-right:15px;
}
.list> li {
    padding: 15px 0px 15px 40px;
    font-size: 16px;
    font-weight:lighter;
}
.list>li:hover {

    color: white;
    box-shadow:1px 1px 10px 1px #50e6df inset;
    transition: padding-left 0.2s linear;
    padding-left: 60px;

}

                    <ul class="list">
                        <li><i class="fa fa-safari" aria-hidden="true"></i><a href="#ne" style="text- decoration:none">Safari</a></li>
                        <li><i class="fa fa-thumbs-up" aria-hidden="true"></i><a href="#ne" style="text- decoration:none">Likes!</a></li>
                        <li><i class="fa fa-users" aria-hidden="true"></i><a href="#ne" style="text- decoration:none">Social</a></li>
                        <li><i class="fa fa-bar-chart" aria-hidden="true"></i><a href="#ne" style="text- decoration:none">Estatísticas</a></li>
                    </ul>

A questão é como transformar toda a <li> em um botão? Sem modificar o style?

 

Obs. Aumentei a letra para que todos consigam observar a pergunta.

Editado Dezembro 7, 2016 por StompShow

[Nano]

.list {

    color: #eee;

    list-style: none;

    padding-left: 0px;

}

li:nth-child(odd) {

    background-color:#13171d;

}

li > a > i {margin-right:15px;

}

.list > a > li {

    padding: 15px 0px 15px 40px;

    font-size: 16px;

    font-weight:lighter;

}

.list > a > li:hover {
 

    color: white;

    box-shadow:1px 1px 10px 1px #50e6df inset;

    transition: padding-left 0.2s linear;

    padding-left: 60px;
 

}

                    <ul class="list">

                        <a href="#"><li><i class="fa fa-safari" aria-hidden="true"></i><span style="text- decoration:none">Safari</span></li></a>

                        <a href="#"><li><i class="fa fa-thumbs-up" aria-hidden="true"></i><span style="text- decoration:none">Likes!</span></li></a>

                        <a href="#"><li><i class="fa fa-users" aria-hidden="true"></i><span style="text- decoration:none">Social</span></li></a>

                        <a href="#"><li><i class="fa fa-bar-chart" aria-hidden="true"></i><span style="text- decoration:none">Estatísticas</span></li></a>

                    </ul>

Se eu entendi direito, isso deve funcionar :v

 

[Pica-Pau]

É Só você adicionar <li><button>....
Pelomenos eu testei e funcionou assim.

[StompShow]

É Só você adicionar <li><button>....

Pelomenos eu testei e funcionou assim.

Por favor leia o que se pede. Se você testou e seguiu o que o tópico pede não deu certo.

[Gualves]

Eu aconselho você a fazer um <button> normal, no caso ficaria assim:

<a href="#"><button>Botão</button></a>

[ExtraPlays]

Usa bootstrap?

 

se sim 

 

<li class="btn btn-default">

[StompShow]

Usa bootstrap?

 

se sim 

 

<li class="btn btn-default">

Gente é difícil ler o tópico? se eu passei o css como eu posso usar bootstrap amigo?

 

Olha a pergunta "A questão é como transformar toda a <li> em um botão? Sem modificar o style?"

Eu não quero criar um botão com a classe button eu quero transformar uma <li> em um botão sem modificar o style.

[leonardosc]

Você quer deixar o li com estilo de um botão ou quer que o li funcione como um botão ?

[StompShow]

Você quer deixar o li com estilo de um botão ou quer que o li funcione como um botão ?

A segunda opção. Não modificando o style.

[StompShow]

.list {
    color: #eee;
    list-style: none;
    padding-left: 0px;
}
li:nth-child(odd) {
    background-color:#13171d;
}
li > a > i {margin-right:15px;
}
.list > a > li {
    padding: 15px 0px 15px 40px;
    font-size: 16px;
    font-weight:lighter;
}
.list > a > li:hover {
 
    color: white;
    box-shadow:1px 1px 10px 1px #50e6df inset;
    transition: padding-left 0.2s linear;
    padding-left: 60px;
 
}

                    <ul class="list">
                        <a href="#"><li><i class="fa fa-safari" aria-hidden="true"></i><span style="text- decoration:none">Safari</span></li></a>
                        <a href="#"><li><i class="fa fa-thumbs-up" aria-hidden="true"></i><span style="text- decoration:none">Likes!</span></li></a>
                        <a href="#"><li><i class="fa fa-users" aria-hidden="true"></i><span style="text- decoration:none">Social</span></li></a>
                        <a href="#"><li><i class="fa fa-bar-chart" aria-hidden="true"></i><span style="text- decoration:none">Estatísticas</span></li></a>
                    </ul>

Se eu entendi direito, isso deve funcionar :v

 

2 problemas. O 

nth-child(odd)

Não se aplica mais.

E o 

text-decoration:none

também não tem mais utilidade.

[Thelike]

Sua dúvida foi marcada como [Resolvido] e movido à área de dúvidas resolvidas.


Atenciosamente,
Gamer's Board