Menu Nav – Hover Círculo

Menu Nav – Hover Círculo

Neste tutorial vamos fazer um menu com efeito hover no formato de círculo com css3.

Vamos Adicionar o Html:

    <nav class="bg hover-circulo">

        <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: #2d2c2c;
	    padding:1.5em 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:#50e6ec; 

	}

	/* Efeito circulo */
	.hover-circulo a::before,
    .hover-circulo a::after {
		position: absolute;
		top: 50%;
		left: 50%;
		width: 75px;
		height: 75px;
		border: 2px solid rgba(95, 217, 222, 0.18);
		border-radius: 50%;
		content: '';
		opacity: 0;
		-webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
		-moz-transition: -moz-transform 0.3s, opacity 0.3s;
		transition: transform 0.3s, opacity 0.3s;
		-webkit-transform: translateX(-50%) translateY(-50%) scale(0.2);
		-moz-transform: translateX(-50%) translateY(-50%) scale(0.2);
		transform: translateX(-50%) translateY(-50%) scale(0.2);
    }

	.hover-circulo a::after {
		width: 50px;
		height: 50px;
		border-width: 6px;
		-webkit-transform: translateX(-50%) translateY(-50%) scale(0.8);
		-moz-transform: translateX(-50%) translateY(-50%) scale(0.8);
		transform: translateX(-50%) translateY(-50%) scale(0.8);
	}

	.hover-circulo a:hover::before,
	.hover-circulo a:hover::after,
	.hover-circulo a:focus::before,
	.hover-circulo a:focus::after {
		opacity: 1;
		-webkit-transform: translateX(-50%) translateY(-50%) scale(1);
		-moz-transform: translateX(-50%) translateY(-50%) scale(1);
		transform: translateX(-50%) translateY(-50%) scale(1);
	}

    /* Efeito Hover Circulo */

Veja o Resultado !

Baixar Código Veja Funcionando