
Menu Nav – Hover Pontilhado
PRÓXIMO
Loading – Circulo Continuo
ANTERIOR
Footer Html css – Clean
Postado: 4 de dezembro de 2021
Tempo de Leitura: < 1 Minuto
Menu Nav – Hover Pontilhado
Neste tutorial vamos fazer um menu com efeito hover pontilhado com css e html.
Vamos Adicionar o Html:
<nav class="bg hover-pontilhado"> <a href="#" title="Página Inícial">Home</a> <a href="#" title="Html">Html</a> <a href="#" title="Css">Css</a> <a href="#" title="jQuery">jQuery</a> <a href="#" title="WrodPress">WrodPress</a> </nav>
Vamos Adicionar o Css:
nav.bg { width:100%; float:left; text-align:center; background-color: #ffd90e; padding:1em 0em; } nav a { position: relative; display: inline-block; margin:5px 30px; outline: none; color: #fff; text-decoration: none; font-weight: bold; font-size: 1.3em; transition:0.6s; } nav a:hover, nav a:focus { transition:0.4s; outline: none; color:#000; } /* Efeito Pontilhado */ .hover-pontilhado a { -webkit-transition: color 0.4s; -moz-transition: color 0.4s; transition: color 0.4s; } .hover-pontilhado a::before { font-size: 1.2em; color: transparent; position: absolute; top: 70%; left: 50%; content: '•'; text-shadow: 0 0 transparent; -webkit-transition: text-shadow 0.3s, color 0.3s; -moz-transition: text-shadow 0.3s, color 0.3s; transition: text-shadow 0.3s, color 0.3s; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); transform: translateX(-50%); pointer-events: none; } .hover-pontilhado a:hover::before, .hover-pontilhado a:focus::before { color: #2f2f2e; text-shadow: 10px 0 #2f2f2e, -10px 0 #2f2f2e; } .hover-pontilhado a:hover, .hover-pontilhado a:focus { color: #2f2f2e; }
Veja o Resultado !
Deixe um comentário