O resultado final é este:
Teste
Cole o código abaixo no seu CSS:
blockquote {
border-right: 10px solid #ff5480;
border-left: 10px solid #ff5480;
background-color: #ffdce3;
padding: 10px; font-size: 10px;
color: #4d2a00;
text-align: center;
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
border-radius: 0px;
box-shadow: inset 0 0 15px #ffb8c5, 0 0 5px #ff5e8e;
transition-duration: 1s;
-moz-transition-duration:1s;
-webkit-transition-duration:1s;
-o-transition-duration:1s;
}
blockquote:hover {
border-right: 5px solid #4d2a00;
border-left: 5px solid #4d2a00;
color: #000;
box-shadow: inset 0 0 15px #ffb8c5, 0 0 5px #ff5e8e;
transition-duration: 1s;
-moz-transition-duration:1s;
-webkit-transition-duration:1s;
-o-transition-duration:1s;
}
Depois, cole o código onde você quiser:
<blockquote>Texto aqui</blockquote>
Se a sua plataforma de blog (Blogger, WordPress…) tem opção de BLOCKQUOTE enquanto você edita ou cria sua postagem (aquele símbolo das aspas), então nem precisa utilizar o código HTML acima, só o do CSS.
O código foi criado no blog Sorvete de Morango, e editado por mim.
Tem dúvidas? Ask-me!