Menus para blogger

Início Ferramentas Downloads Contato

<!-- Menu 1 --> <style> .menu-bar { text-align: center; } .menu-bar a { background: transparent; color: #00ffff; margin: 0 10px; padding: 10px 20px; border-radius: 25px; font-weight: bold; border: 1px solid #00ffff; text-decoration: none; transition: 0.3s; } .menu-bar a:hover { background: #111; color: #00ff00; box-shadow: 0 0 10px #00ff00; } </style> <div class="menu-bar"> <a href="#">Início</a> <a href="#">Ferramentas</a> <a href="#">Downloads</a> <a href="#">Contato</a> </div>

Home Cursos Plugins Ajuda

<!-- Menu 2 --> <style> .menu-bar { text-align: center; } .menu-bar a { background: linear-gradient(to right, #111, #222); color: #39f; padding: 10px 18px; margin: 0 12px; border-radius: 12px; font-weight: 600; border: 1px solid #39f; text-decoration: none; transition: all 0.3s ease; } .menu-bar a:hover { background: #000; border-color: #0f0; color: #0f0; box-shadow: 0 0 10px #0f0; } </style> <div class="menu-bar"> <a href="#">Home</a> <a href="#">Cursos</a> <a href="#">Plugins</a> <a href="#">Ajuda</a> </div>

Blog Extras F.A.Q Contato

<!-- Menu 3 --> <style> .menu-bar { text-align: center; } .menu-bar a { background: #000; color: #0ff; margin: 0 10px; padding: 8px 16px; border-radius: 8px; font-weight: bold; text-decoration: none; border: 2px dashed #0ff; transition: 0.2s; } .menu-bar a:hover { background-color: #0f0; color: #000; border-color: #000; box-shadow: 0 0 10px #0f0; } </style> <div class="menu-bar"> <a href="#">Blog</a> <a href="#">Extras</a> <a href="#">F.A.Q</a> <a href="#">Contato</a> </div>