Leia mais com degrade e efeito hover zoomaning

Olá amores, como vão? Eu andei fuçando alguns códigos por aí e personalizando algumas coisas e BUM - resolvi fazer um botão de leia mais bem personalizado, com degradê e houver zoom. O efeito é bem bonito e da um toque especial a página, mas é possível fazer algumas alterações próprias e personalizadas no botão que eu irei ensinar com o tutorial de hoje. - Não se preocupe, irei explicar timtim por timtim

Ah, o exemplo com preview vocês podem utilizar o do próprio layout do DC, afinal, o código que irei disponibilizar é o mesmo. Entretanto, no caso de uso não esqueça de creditar ao DC, pois, o código é de minha autoria.

Exemplo

                                             

                                                          Normal

Efeito Houver

Para prosseguir o tutorial, siga o mesmo caminho de sempre e vá em Desing » Temas » Editar o Html

1. Procure por  ]]></b:skin>  e cole ESSE código em cima dele;

.jump-link{
float: right; /* no lado direito ou esquero, pode mudar para left */
background: rgba(255,235,244,1);
background: -moz-linear-gradient(left, rgba(255,235,244,1) 0%, rgba(255,163,180,1) 19%, rgba(255,133,151,1) 63%, rgba(255,122,147,1) 100%);
background: -webkit-gradient(left top, right top, color-stop(0%, rgba(255,235,244,1)), color-stop(19%, rgba(255,163,180,1)), color-stop(63%, rgba(255,133,151,1)), color-stop(100%, rgba(255,122,147,1)));
background: -webkit-linear-gradient(left, rgba(255,235,244,1) 0%, rgba(255,163,180,1) 19%, rgba(255,133,151,1) 63%, rgba(255,122,147,1) 100%);
background: -o-linear-gradient(left, rgba(255,235,244,1) 0%, rgba(255,163,180,1) 19%, rgba(255,133,151,1) 63%, rgba(255,122,147,1) 100%);
background: -ms-linear-gradient(left, rgba(255,235,244,1) 0%, rgba(255,163,180,1) 19%, rgba(255,133,151,1) 63%, rgba(255,122,147,1) 100%);
background: linear-gradient(to right, rgba(255,235,244,1) 0%, rgba(255,163,180,1) 19%, rgba(255,133,151,1) 63%, rgba(255,122,147,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffebf4', endColorstr='#ff7a93', GradientType=1 );
padding-left: 2px; /* espaçamento esquerda */
padding-right: 2px; /* espaçamento direita */
padding-bottom: 5px; /* espaçamento embaixo */
padding-top: 5px; /* espaçamento emcima */
text-align: center; /* alinhamento do texto */
width: 100px; /* largura do fundo */
opacity: 0.7; /* opacidade */
-webkit-transition-duration: 1.00s; /* duração da volta do hover */
transform: scale(0.891, 1.009);
-webkit-transform: scale(0.891, 1.009);
-moz-transform: scale(0.891, 1.009);
-o-transform: scale(0.891, 1.009);
-ms-transform: scale(0.891, 1.009);
font-family: 'Amatic SC', cursive; /*Tipo de fonte*/
font-size: 18px; /*Tamanho da fonte*/
font-color: #000; /* cor da fonte */
}
.jump-link:hover{
padding-left: 2px; /* espaçamento esquerda */
padding-right: 2px; /* espaçamento direita */
padding-bottom: 5px; /* espaçamento embaixo */
padding-top: 5px; /* espaçamento em cima */
background: rgba(238,252,249,1);
background: -moz-linear-gradient(-45deg, rgba(238,252,249,1) 0%, rgba(169,240,249,0.87) 32%, rgba(136,234,251,0.79) 51%, rgba(127,237,252,0.65) 87%, rgba(124,238,253,0.65) 100%);
background: -webkit-gradient(left top, right bottom, color-stop(0%, rgba(238,252,249,1)), color-stop(32%, rgba(169,240,249,0.87)), color-stop(51%, rgba(136,234,251,0.79)), color-stop(87%, rgba(127,237,252,0.65)), color-stop(100%, rgba(124,238,253,0.65)));
background: -webkit-linear-gradient(-45deg, rgba(238,252,249,1) 0%, rgba(169,240,249,0.87) 32%, rgba(136,234,251,0.79) 51%, rgba(127,237,252,0.65) 87%, rgba(124,238,253,0.65) 100%);
background: -o-linear-gradient(-45deg, rgba(238,252,249,1) 0%, rgba(169,240,249,0.87) 32%, rgba(136,234,251,0.79) 51%, rgba(127,237,252,0.65) 87%, rgba(124,238,253,0.65) 100%);
background: -ms-linear-gradient(-45deg, rgba(238,252,249,1) 0%, rgba(169,240,249,0.87) 32%, rgba(136,234,251,0.79) 51%, rgba(127,237,252,0.65) 87%, rgba(124,238,253,0.65) 100%);
background: linear-gradient(135deg, rgba(238,252,249,1) 0%, rgba(169,240,249,0.87) 32%, rgba(136,234,251,0.79) 51%, rgba(127,237,252,0.65) 87%, rgba(124,238,253,0.65) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eefcf9', endColorstr='#7ceefd', GradientType=1 );
width: 100px; /*largura do fundo com  o mouse em cima */
opacity: 1.0; /* opacidade */
-webkit-transition-duration: 1.00s; /* duração do hover */
text-decoration: none; /* sem sublinhado, negrito, itálico ou tachado */
transform: scale(1.202, 1.009);
-webkit-transform: scale(1.202, 1.009);
-moz-transform: scale(1.202, 1.009);
-o-transform: scale(1.202, 1.009);
-ms-transform: scale(1.202, 1.009);
font-family: 'Amatic SC', cursive; /*Tipo de fonte*/
font-size: 14px; /*Tamanho da fonte*/
}

Entendendo o CÓDIGO  

Em rosa-  tudo referente ao background. Mexa se quiser acessando esse site. Ele vai gerar um código, copie e cole na parte em rosa caso deseje alterar a cor.
Em verde - tudo referente o hover. Não mexa para não dar erro no botão.
Em azul - depois do mouse.

Então cativos, espero que o tutorial tenha ajudado vocês. Qualquer dúvida, entre em contato por comentário que eu responderei o mais brevemente possível. Não se esqueça de creditar ao DC no caso de utilização ou do repasse do tutorial, hein? Beijos.