Vou postar o código aqui. Por que apenas o último botão da pagina agiu dessa forma, o botão que enta dentro da section "blog":
<main>
<section class="saudacoes">
<p><span class="saudacoes-texto1">Olá,</span> meu nome é <strong>João da Silva</strong> <span class="saudacoes-texto2">e eu construo <em>sites maravilhosos</em></span></p>
<a href="bio.html" class="botao-index">Conheça mais um pouco sobre mim</a>
</section>
<section class="trabalhos">
<h2>Trabalhos</h2>
<ul>
<li><img src="img/bmw.png" alt="Site BMW"></li>
<li><img src="img/ibm.png" alt="Site IBM"></li>
<li><img src="img/uol.png" alt="Site UOL"></li>
</ul>
<a href="portifolio.html" class="botao-index">Veja mais</a>
</section>
<section class="blog">
<h2>Blog</h2>
<small>Últimos posts</small>
<ul class="ultimos-posts">
<li>
<a href="blog.html">O essencial de design responsivo</a>
<p class="inicio-post">
Design responsivo tem ganho cada vez mais atenção como técnica de desenvolvimento de páginas web para dispositivos móveis. Mas como começar?
</p>
</li>
<li>
<a href="blog.html" class="post2">Por que fazer páginas acessíveis?</a>
<p class="inicio-post2">
Tem se falado cada vez sobre acessibilidade na web. Há diversas técnicas e diretivas a serem seguidas, inclusive da própria W3C. Mas vale a pena investir nisso?
</p>
</li>
<li>
<a href="blog.html" class="post3">JavaScript não obstrusivo</a>
<p class="inicio-post3">
JavaScript é uma linguagem essencial hoje em dia para criar páginas ricas, interativas e dinâmicas. Porém, há alguns cuidados que devem ser tomados ao colocarmos código JavaScript em nossas páginas.
</p>
</li>
</ul>
<a href="blog.html" class="botao-index">Veja mais</a>
</section>
main {
width: 100%;
padding: 0;
float: none;
}
.botao-index {
background-color: #851944;
color: #FFF;
width: 40ch;
display: block;
text-align: center;
margin: 2em auto;
padding: .5em;
font-size: 1.25em;
border: .2em solid black;
box-shadow: 0 0 1em #000, inset 0 0 .5em #FFF;
}
.trabalhos {
background-color: #3C1D3D;
background-image: linear-gradient(135deg,
transparent,
transparent 14px,
rgba(0,0,0,0.1) 14px,
rgba(0,0,0,0.1) 15px,
transparent 15px,
transparent);
background-size: 20px 20px;
background-attachment: fixed;
padding-bottom: 2em;
border-bottom: .5em solid black;
}
.trabalhos h2 {
color: #FFF;
text-transform: uppercase;
padding: .7em;
font-size: 3em;
}
.trabalhos ul {
overflow: hidden;
border: .5em solid black;
margin: 0 2em;
}
.trabalhos li {
float: left;
width: 33.33%;
}
.trabalhos img {
width: 100%;
display: block;
}
.blog h2 {
text-transform: uppercase;
color: #FFF;
padding: .7em;
font-size: 3em;
}
.blog {
background-color: #999;
background-image: linear-gradient(45deg,
transparent,
transparent 14px,
rgba(255, 255, 255, 0.1) 14px,
rgba(255, 255, 255, 0.1) 15px,
transparent 15px,
transparent);
background-size: 20px 20px;
background-attachment: fixed;
color: #FFF;
border-bottom: .5em solid #851944;
position: relative;
}
.blog a:hover + .inicio-post,
.blog a:focus + .inicio-post {
display: block;
}
.blog a:hover {
background-color: #F2FFFC;
color: #F26;
}
.post2:hover + .inicio-post2 {
display: block;
}
.post3:hover + .inicio-post3 {
display: block;
}
.blog small {
position: relative;
top: -2.5em;
padding: 2.2em;
}
.blog li a{
padding: .5em;
display: block;
margin-left: 2em;
color: #FCF;
}
.ultimos-posts{
width: 30%;
}
.inicio-post {
position: absolute;
top: 6em;
left: 20em;
height: 6em;
padding: 1em;
background-color: #FFF;
color: black;
display: none;
}
.inicio-post2 {
position: absolute;
width: 100ch;
top: 8em;
left: 20em;
height: 6em;
padding: 1em;
background-color: #FFF;
color: black;
display: none;
}
.inicio-post3 {
position: absolute;
width: 100ch;
top: 10em;
left: 20em;
height: 6em;
padding: 1em;
background-color: #FFF;
color: black;
display: none;
}
