Botões Animados com HTML e CSS

Botões Animados com HTML e CSS

Neste artigo veja como criar botão animado somente com HTML e CSS.

Nesta seção, projetaremos uma estrutura básica no html. 

Usaremos A Tag <div>, <i>, <p> e a tag <a> para inserirmos o <link> de destino.

Essas são as tags que usaremos no html

Vamos Adicionar o Html

    <div class="botoes">
      
        <a href="#" class="btn">
            <i class="icone icon icon-android"></i>
            <p class="txt-btn">Android</p>
        </a>

        <a href="#" class="btn">
            <i class="icone icon icon-apple"></i>
            <p class="txt-btn">Apple</p>
        </a>

        <a href="#" class="btn">
            <i class="icone icon icon-windows"></i>
            <p class="txt-btn">Windows</p>
        </a>

    </div><!--Botões-->

Vamos Adicionar o CSS

Nesta seção, usaremos algumas propriedades CSS para estilizar e da o efeito desejado nos botões.

.botoes{

	display: flex;
	justify-content: center;
	align-items: center;
	cursor: pointer;

}

.icone{

    min-width: 40px!important;
    min-height: 40px!important;
    line-height: 48px;
    background: #0087ff;
    color: #fff;
    text-align: center;
    border-radius: 50px;
    font-size: 25px;

}

.btn{
	
	width: 50px;
	height: 50px;
	background-color: #ececec;
	color: rgba(255,255,255, 0);
	display: flex;
	justify-content: left;
	margin: 20px;
	padding: 5px;
	border-radius: 50px;
	transition: 1s;
	text-decoration: none;

}

.btn:hover{
	
	width: 250px;
	height: 50px;
	background-color: #02539b;
	color: rgba(255,255,255, 100);

}

.txt-btn{

  display: block ruby;
  margin-left: 10px;
  height: 33px;
  line-height: 40px;
  overflow: hidden;
  transform: translateX(5px);

}

Combinando as Duas seções acima Html + Css temos o seguinte Resultado!

Veja o Resultado baixo!

Baixar Código Veja Funcionando