Son botones sin relleno, solo con un marco y un llamado a la acción.
Los botones de los llamados "fantasmas" son la charla de hoy de la oficina y son al parecer una tendencia predominante que está creciendo día a día. así, lo que realmente lo hace una entidad casi translúcida tiene que ver con todo esto? vamos a averiguarlo.
Ejemplo sencillo de botón fantasma responsivo:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>SVG demo</title> <link rel="stylesheet" href="css/main.css"> <style> body { font-size: 16px; } /* Por debajo de 700px */ @media screen and (max-width:600px) { body { font-size: 13px; } } /* Por debajo de 400px */ @media screen and (max-width:400px) { body { font-size: 10px; } } object { width: 100%; height: 100%; } .link:hover, .submit:hover { background: #acdef6; color: #333 !important; } .submit { margin-bottom: 20px; min-width: 0; fontsize: 0.175rem; padding: 10px; } .link, .submit { display: inline-block; min-width: 209px; border: 1px solid #ACDEF6; border-radius: 2px; color: #656565; font-family: clanotbold, sans-serif; fontsize: 0.175rem; text-align: center; text-transform: uppercase; transition: all 0.5s ease 0s; padding: 22px 20px 20px; width: 13% !important; } a, .blocks h2:hover, .blocks a:hover { color: #FFF; } a { color: #08C; text-decoration: none; } </style> </head> <body> <a href="#" class="link" onclick="alert('Read More');">Read More</a>
</body> </html>
Comentarios
Publicar un comentario