Botão personalizado para incentivar comentários no post

Que tal inserir um botão em todos os seus posts para pedir para o usuário a deixar sua opinião, sugestão ou até mesmo crítica sobre o conteúdo que você cria? Esse botão é perfeito e você pode utilizar no seu blog para atrair mais tráfego e gerar mais resultados.

Antes do </head>

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">

Código CSS

.avalie {
background: #fd5d00; /*Fundo do botão*/
border-radius: 04px; /*Arredondamento das bordas*/
padding: 06px 10px; /*Espaço entre a margem e as letras dentro do botão*/
font-size: 0.7em; /*Tamanho da fonte*/
font-family:"Roboto",sans-serif; /*Estilo da fonte*/
font-weight: 700; /*Peso da fonte*/
position: center;
width: 150px; /*largura do botão*/
cursor: pointer
}
.avalie a{ color: #fff; text-decoration:none} /*Cor da fonte no link*/
.avalie:hover {background:#fd2f00;} /* Cor do fundo do botão ao passar o mouse*/
.avalie a:after{font-family:FontAwesome;color:#ffcf47;float:left;margin-left:5px; margin-right:5px}

Código HTML

<div style="avalie">
<a title='Avalie essa receita' href='#comments'>AVALIE ESSE POST</a>
</div>

Você pode modificar as cores e também o ícone que está inserido no botão. Eu destaquei em vermelho onde você pode personalizar as cores do botão.

Este é um exemplo de como ficará o botão:

 

AVALIE ESSE POST