O menu abaixo não está funcional, foi criado apenas para que você possa ver os efeitos ao passar o mouse sobre cada botão.
Esse é um menu nativo do WordPress
Cada botão tem uma classe única, você pode escolher um e adicionar a todo o menu ou usar sua imaginação para criar um menu personalizado para seu site.
O CSS de cada classe esta logo abaixo. Para que funcione, você deve adicionar classe correspondente em cada item do seu menu.
classe: home
CSS:
.home-btn a{ border-radius:7px 7px 0 0; background-color:#ff0000; color:#fff!important; max-height:10px!important; margin:auto!important; padding: 22px 10px!important; } @keyframes home { 10% { -webkit-transform: translateX(3px) rotate(2deg); transform: translateX(3px) rotate(2deg); } 20% { -webkit-transform: translateX(-3px) rotate(-2deg); transform: translateX(-3px) rotate(-2deg); } 30% { -webkit-transform: translateX(3px) rotate(2deg); transform: translateX(3px) rotate(2deg); } 40% { -webkit-transform: translateX(-3px) rotate(-2deg); transform: translateX(-3px) rotate(-2deg); } 50% { -webkit-transform: translateX(2px) rotate(1deg); transform: translateX(2px) rotate(1deg); } 60% { -webkit-transform: translateX(-2px) rotate(-1deg); transform: translateX(-2px) rotate(-1deg); } 70% { -webkit-transform: translateX(2px) rotate(1deg); transform: translateX(2px) rotate(1deg); } 80% { -webkit-transform: translateX(-2px) rotate(-1deg); transform: translateX(-2px) rotate(-1deg); } 90% { -webkit-transform: translateX(1px) rotate(0); transform: translateX(1px) rotate(0); } 100% { -webkit-transform: translateX(-1px) rotate(0); transform: translateX(-1px) rotate(0); } } .home-btn:hover, .home-btn:focus, .home-btn:active { -webkit-animation-name: home; animation-name: home; -webkit-animation-duration: 0.75s; animation-duration: 0.75s; -webkit-animation-timing-function: linear; animation-timing-function: linear; -webkit-animation-iteration-count: 1; animation-iteration-count: 1; }
classe: quem
CSS:
.quem-btn a{ background-color:#fff000; margin:auto!important; height:10px!important; padding:22px 10px!important; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-property: transform; transition-property: transform; } .quem-btn a:hover, .quem-btn a:focus, .quem-btn a:active { -webkit-transform: scale(1.1) rotate(4deg); transform: scale(1.1) rotate(4deg); }
classe: galeria
CSS:
.galeria-btn a{ background-color:#00B449; color:#fff!important; margin:auto!important; height:10px!important; padding:22px 10px!important; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); position: relative; } .galeria-btn:before, .galeria-btn:after { pointer-events: none; position: absolute; content: ''; left: 0; width: 100%; box-sizing: border-box; background-repeat: no-repeat; height: 5px; opacity: 0; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-property: opacity; transition-property: opacity; } .galeria-btn:before { bottom: 100%; background: -webkit-radial-gradient(50% 150%, ellipse, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0) 80%); background: radial-gradient(ellipse at 50% 150%, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0) 80%); } .galeria-btn:after { top: 100%; background: -webkit-radial-gradient(50% -50%, ellipse, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0) 80%); background: radial-gradient(ellipse at 50% -50%, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0) 80%); } .galeria-btn:hover:before, .galeria-btn:focus:before, .galeria-btn:active:before, .galeria-btn:hover:after, .galeria-btn:focus:after, .galeria-btn:active:after { opacity: 1; }
classe: portifolio
CSS:
.portifolio-btn a{ background-color:#6B2DB7; color:#fff!important; margin:auto!important; height:10px!important; padding:22px 10px!important; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-property: transform; transition-property: transform; } .portifolio-btn a:hover, .portifolio-btn:focus, .portifolio-btn a:active { -webkit-transform: translateX(8px); transform: translateX(8px); }
classe: contato
CSS:
.contato-btn a{ background-color:#66A2DA; color:#fff!important; margin:auto!important; height:10px!important; padding:22px 10px!important; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-property: transform; transition-property: transform; } .contato-btn a:hover, .portifolio-btn:focus, .contato-btn a:active { -webkit-transform: translateX(-8px); transform: translateX(-8px); }