8 Tipos de Links Personalizado com Css

Paginação Responsiva em Html e Css

Menu Navbar

Postado: 27 de março de 2025 Tempo de Leitura: 3 Minutos

8 Tipos de Links Personalizado com Css que você pode usar no seu site e blogs.

Neste artigo vamos criar um conjunto de links personalizados com css3. quando o usuário passar o mouse o link executa a animação do respectivo link.

Estrutura Base que vamos usar no projeto!

A estrutura base do nosso pequeno projeto para os ícones vai ser composto por apenas dois arquivos, por ser apenas dois arquivos, não será algo muito complexo de realizar, o primeiro arquivo será o index.html e o segundo style.css.

Portanto, crie uma pasta CSS, para inserir o arquivo style.css, a mesma regra serve se você estiver usando scripts crie pastas para organizar o seu projeto seja qual for organização é fundamental para organização e manutenção no futuro.

Nesta seção, projetaremos uma estrutura simples nas tags <div>, <ol>, <li>, e a tag <a> para inserirmos o link de destino.

Essa tag que usaremos para criar os Links.

A primeira coisa que você deve fazer é colocar todas as tags básicas que são essenciais independente de qual projeto esteja sendo desenvolvido.

Nesta seção, usaremos algumas as tags HTML para montar a estrutura dos Links.

Estrutura Código Html:

HTML

    <div class="box-links">
        
        <ol>
          
            <li>
                <div class="effect-one"><a>Underline - Inside out</a></div>
            </li>
            <li>
                <div class="effect-two"><a>Underline - Right to Left</a></div>
            </li>
            <li>
                <div class="effect-three"><a>Underline - Right to Left</a></div>
            </li>
            <li>
                <div class="effect-four"><a>Underline - Bounce down</a></div>
            </li>
            <li>
                <div class="effect-five"><a>Background color - Right to Left</a></div>
            </li>
            <li>
                <div class="effect-six"><a>Background color - Left to Right</a></div>
            </li>
            <li>
                <div class="effect-seven"><a>Background color - Bottom to Top</a></div>
            </li>
            <li>
                <div class="effect-eight"><a>Background color - Top to Bottom</a></div>
            </li>

        </ol>

    </div>

Estrutura Código CSS

Para conseguirmos o efeito desejado nos links, vamos adicionar algumas propriedades CSS para as tags que foram colocadas na sessão HTML que usamos.

Portanto, você pode criar um arquivo style.css, coloque todo o código que se encontra logo mais abaixo.

Nesta seção, usaremos algumas propriedades CSS para estilizar os links.

CSS

a {
  cursor: pointer;
  text-decoration: none;
}

ol, li {
  margin: 0;
  padding: 0;
}

li {
  padding: 12px;
}

.box-links {
  width: 100%;
  max-width: 400px;
  margin: 0 auto 0 auto;
}

.effect-one > a {
  position: relative;
}
.effect-one > a:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 2px;
  bottom: 0;
  margin: -5px 0;
  background-color: #007cff;
  visibility: hidden;
  transform: scaleX(0);
  transition: all 0.4s ease-in-out 0s;
}
.effect-one > a:hover:before {
  visibility: visible;
  transform: scaleX(1);
}

.effect-two > a {
  display: inline-block;
  position: relative;
}
.effect-two > a:after {
  content: "";
  display: block;
  position: absolute;
  width: 0;
  bottom: 0;
  height: 2px;
  margin: -5px 0;
  right: 0;
  background-color: #007cff;
  transition: all 0.4s ease-in 0s;
}
.effect-two > a:hover:after {
  width: 100%;
}

.effect-three > a {
  display: inline-block;
  position: relative;
}
.effect-three > a:after {
  content: "";
  display: block;
  position: absolute;
  width: 0;
  bottom: 0;
  height: 2px;
  margin: -5px 0;
  left: 0;
  background-color: #007cff;
  transition: all 0.4s ease-in 0s;
}
.effect-three > a:hover:after {
  width: 100%;
}

.effect-four > a {
  padding: 0 0 4px 0;
  border-bottom: 2px solid #007cff;
  transition: 0.3s ease;
}
.effect-four > a:hover {
  padding: 0 0 6px 0;
  border-color: #007cff;
}

.effect-five > a {
  padding: 0 5px;
  box-shadow: inset 0 0 0 0 #007cff;
  transition: all 0.4s ease-in-out 0s;
}
.effect-five > a:hover {
  box-shadow: inset -300px 0 0 0 #007cff;
  color: #ffffff;
}

.effect-six > a {
  padding: 0 5px;
  box-shadow: inset 0 0 0 0 #007cff;
  transition: all 0.4s ease-in-out 0s;
}
.effect-six > a:hover {
  box-shadow: inset 300px 0 0 0 #007cff;
  color: #ffffff;
}

.effect-seven > a {
  padding: 0 5px;
  box-shadow: inset 0 0 0 0 #007cff;
  transition: all 0.5s ease-in-out 0s;
}
.effect-seven > a:hover {
  box-shadow: inset 0 -300px 0 0 #007cff;
  color: #ffffff;
}

.effect-eight > a {
  padding: 0 5px;
  box-shadow: inset 0 0 0 0 #007cff;
  transition: all 0.5s ease-in-out 0s;
}
.effect-eight > a:hover {
  box-shadow: inset 0 300px 0 0 #007cff;
  color: #ffffff;
}

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

Veja o Resultado baixo!