Ja foi o tempo em que a paginacao do seu blog/site eram aquelas simples setas, botoes ou o simplesmente textos. Hoje o CSS os permite criar o que quisermos de forma simples e descomplicada.O tutorial a seguir pode ser utilizado na paginacao do blogger por exemplo.Passo 1 Corpo da paginacaoDefina sua paginacao no html<ul><li><a href="#">1</a></li><li><a href="#">2</a></li><li><a href="#">3</a></li><li><a href="#">4</a></li><li><a href="#">5</a></li><li><a href="#">6</a></li></ul>Passo 2 - Cssul {display:block;font: bold 15px Arial, times, Serif;}ul li {display: inline;text-align: center;}ul li a {border:3px solid #9b59b6;color: #9b59b6;-webkit-border-radius: 100px;-moz-border-radius: 100px;border-radius: 100px;padding:10px 15px;transition: all 0.3s linear;}ul li a:hover {background: #9b59b6;color:#fff;}O efeito de transicao no preenchimento da paginacao se deve a propriedade "transition". Agora e so aplicar em seus projetos. Neste tutorial voce vai aprender como criar um elegante menu utilizando a dupla Html e Css em poucas linhas de codigos. Lembrando que o tutorial e voltado para o usuario iniciante, que esta se aventurando como desenvolvedor front-end ou que desenvolve por hobbie. Entendendo o menuNos iremos trabalhar com o Html5. O elemento Nav representa uma secao da pagina que contem links para outras paginas. Logo apos vem o ul seguido do li com um elemento de link a dentro.Criando o menuAbra seu editor de codigos (eu utilizo o Sublime Text), digite as linhas abaixo e salve como menu.html.<!DOCTYPE html><html lang="pt-BR"><head> <meta charset="UTF-8"> <title>Crianerd - Tutorial menu com html e css</title></head><body> </body></html> Agora introduziremos o menu abaixo da primeira tag body, seguindo a imagem de conhecimento visto la em cima.<nav> <ul> <li><a href="#" class="titulo-blog">Crianerd</a></li> <li><a href="#">Home</a></li> <li><a href="#">Artigos</a></li> <li><a href="#">Freebies</a></li> <li><a href="#">Tutoriais</a></li> </ul></nav> Salve e visualize nosso menu no navegador. Perceba sua estrutura ja esta pronta, restando apenas o css para dar forma. Perceba que defini uma class no primeiro link que funcionara como nosso titulo do blog.Dando forma ao nosso menu com cssAdicione o seguinte codigo acima da tag de fechamento Head.<!DOCTYPE html><html lang="pt_BR"><head> <meta charset="UTF-8"> <title>Menu</title><style>/*--------------ESTILOS GLOBAIS*/ * { margin:0; padding:0; list-style:none; text-decoration:none; } body { font-family: 'Montserrat', sans-serif; font-size:18px; } a, a:visited { color:#fff; }/*--------------ESTILO MENU*/ nav { background:#2E2633; width:100%; height:100px; } nav ul li { display:inline-block; } nav ul li a { display:block; padding:38px 20px; transition: all 0.6s ease; } nav ul li a:hover { background:#555152; } .titulo-blog, .titulo-blog:visited { color:#FBB829; font-weight:600; text-transform:uppercase; } a.titulo-blog:hover { background:none; color:#FBB829; }</style></head><body> O css definido em global e voltado para os aspectos gerais da pagina. Perceba que a fonte utlizada na tag body e a Montserrat. Para que ela funcione, vamos introduzi-la abaixo do nosso estilo.<!DOCTYPE html><html lang="pt-BR"><head> <meta charset="UTF-8"> <title>Menu</title><style>/*--------------ESTILOS GLOBAIS*/ * { margin:0; padding:0; list-style:none; text-decoration:none; } body { font-family: 'Montserrat', sans-serif; font-size:18px; } a, a:visited { color:#fff; }/*--------------ESTILO MENU*/ nav { background:#2E2633; width:100%; height:100px; } nav ul li { display:inline-block; } nav ul li a { display:block; padding:38px 20px; transition: all 0.6s ease; } nav ul li a:hover { background:#555152; } .titulo-blog, .titulo-blog:visited { color:#FBB829; font-weight:600; text-transform:uppercase; } a.titulo-blog:hover { background:none; color:#FBB829; }</style><link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet"/> </head><body> <nav> <ul> <li><a href="#">Crianerd</a></li> <li><a href="#">Home</a></li> <li><a href="#">Artigos</a></li> <li><a href="#">Freebies</a></li> <li><a href="#">Tutoriais</a></li> </ul></nav></body></html> Salve seu documento e visualize-o no navegador. Espero que tenha curtido e se tiver alguma duvida, nao deixe de me