"Leia Mais" personalizado ||

Oi amores, como vão? Passei um "perrengue" ontem mais já tá de boa. Giria estranha né? Não sei porque lembrei dela '-' kkkkkkk acho que essa giria é daqui da Bahia mas não tenho certeza, moro aqui mas to meio por fora... Amanhã é o vestibular, to um pouco com medo afinal o curso que eu quero é bem concorrido, fiquem mentalizando que eu vou passar tá? Ajudaria um pouco u.u kk. Enfim, vou ensinar outro modo de personalizar o "Leia mais" de vocês de outra forma mas legal do que a primeira :3 vamos ao tutorial?

Antes de começar o tutorial queria dizer que esse código é lá do candylland.net

.jump-link { /* Area geral do leia mais */
float:right;
background: #CORDOFUNDO;
border-radius: 5px;
padding: 5px 5px;
margin-left: 20px;
border-left: 1px inset #COR DA BORDA ESQUERDA;
border-right: 1px inset #COR DA BORDA DIREITA;
border-top: 1px inset #COR DA BORDA DE CIMA;
border-bottom: 1px inset #COR DA BORDA DE BAIXO;
font-family: 'Freeroad';
font-size: 12px;
margin-top: DISTÂNCIA DO POSTpx;
margin-right: 20px;
text-shadow: 1px 2px 3px #fff;
}
.jump-link a {
color: #COR DA FONTE; /* Estilos para o texto */
text-decoration: none;
}
.jump-link:hover { /* Estilos para quando se passa o mouse */
background: #COR DO FUNDO QUANDO PASSAR O MOUSE;
border-radius: 2px;
text-decoration:none;
text-shadow: 1px 2px 3px #fff;
}

border-radius é o tanto que a borda vai arredondar, quando maior o número mais redondo fica.

padding é como a distância entre o texto e a borda, quanto maior o padding maior vai ser o espaço entre o texto e a borda e vice versa.

text-shadow é o sombreado.

Eu acho mais legal pra essa situação as fontes menos cursivas, se você quiser uma fonte como a minha não precisa mudar, se quiser mudar vou te dar algumas opções.

Agora vai personalizando do jeito que você quiser, dá pra por efeitos bem legais, eu gosto dele um pouco mais simples mas isso vai de pessoa para pessoa.

Fontes: (Vou por os códigos mais não vou por preview de casa uma porque to com pressa :c vocês vão ter que testar e ver qual combina mais)

@font-face {font-family:'Delius';font-weight:400;src:local('Delius-Regular'), url('http://themes.googleusercontent.com/static/fonts/delius/v3/7WQiMJKp1Jo3CiUw302zGA.woff') format('woff')}

@font-face {font-family:'Rochester';src:local('Rochester'),local('Rochester-Regular'),url('http://themes.googleusercontent.com/static/fonts/rochester/v3/nE50b4-SbQ54pks-8vOplz8E0i7KZn-EPnyo3HZu7kw.woff') format('woff')}

@font-face {font-family:'Dancing Script';src:local('Dancing Script'),local('DancingScript'), url('http://themes.googleusercontent.com/static/fonts/dancingscript/v3/DK0eTGXiZjN6yA8zAEyM2VhlQWQpSCpzb2Peu3I-Q34.woff') format('woff')}

@font-face {font-family:'Comfortaa';src:local('Comfortaa'),url('http://themes.googleusercontent.com/static/fonts/comfortaa/v3/qLBu5CQmSMt1H43OiWJ77T8E0i7KZn-EPnyo3HZu7kw.woff') format('woff')}

@font-face {font-family:'Arvo';src:local('Arvo'),url('http://themes.googleusercontent.com/static/fonts/arvo/v5/WJ6D195CfbTRlIs49IbkFw.woff') format('woff')}

Para usar altere o nome em font-family: 'nome da sua fonte' e copie e cole esse código depois da última class. Exemplo:

.jump-link:hover { /* Estilos para quando se passa o mouse */

background: #COR DO FUNDO QUANDO PASSAR O MOUSE;

border-radius: 2px;

text-decoration:none;

text-shadow: 1px 2px 3px #fff;

}

@font-face {font-family:'Dancing Script';src:local('Dancing Script'),local('DancingScript'), url('http://themes.googleusercontent.com/static/fonts/dancingscript/v3/DK0eTGXiZjN6yA8zAEyM2VhlQWQpSCpzb2Peu3I-Q34.woff') format('woff')}