CSS button with embedded base64 encoded SVG and CSS3

A CSS button using embedded base64 encoded SVG, CSS3 transforms, gradients, rounded corners, etc. The text size can be adjusted to make the button zoom in. Only works in recent Webkit-based browsers.

by kazu69

HTML

<a id="link" href="#">Star this !</a>

<!--

SVG Star file content before base64 encoding :


<?xml version="1.0" encoding="utf-8"?>

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="10px" height="10px" viewBox="0 0 10 10" enable-background="new 0 0 10 10" xml:space="preserve">

    <polygon points="5,0 6.545,3.292 10,3.82 7.5,6.382 8.09,10 5,8.292 1.91,10 2.5,6.382 0,3.82 3.455,3.292"/>

</svg>


---

SVG Star file content after base64 encoding :


PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPjxzdmcgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIgd2lkdGg9IjEwcHgiIGhlaWdodD0iMTBweCIgdmlld0JveD0iMCAwIDEwIDEwIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCAxMCAxMCIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+PHBvbHlnb24gcG9pbnRzPSI1LDAgNi41NDUsMy4yOTIgMTAsMy44MiA3LjUsNi4zODIgOC4wOSwxMCA1LDguMjkyIDEuOTEsMTAgMi41LDYuMzgyIDAsMy44MiAzLjQ1NSwzLjI5MiIvPjwvc3ZnPg==


---

Try online base64 encoding/decoding here : http://rumkin.com/tools/compression/base64.php

-->

CSS

/*

   Copyright (c) 2010 Sebastien P.

   http://twitter.com/_sebastienp

   MIT licensed.

   ---

   A CSS button using embedded base64 encoded SVG,
   CSS3 transforms, gradients, rounded corners, etc.

   The text size can be adjusted to make the button
   zoom in.

   Only works in recent Webkit-based browsers.

*/


/* Default font styles */

body {
    font: 100% helvetica;
    line-height: 1;
    padding: 50px
}

/* Button styles */

#link {
    background: -webkit-gradient(
        linear,
        left top,
        left bottom,
        from(#ccc),
        to(#fff)
    ) #ccc;
    border: 0.1em solid #333;
    color: #333;
    padding: 0.75em;
    text-decoration: none;
    text-shadow: 0 -0.1em 0 #fff;
    -webkit-background-clip: padding-box;
    -webkit-border-radius: 0.5em;
    -webkit-box-shadow: 0 0 0.5em #ccc
}

#link,
#link::before {
    display: inline-block
}

/* Embedded SVG Star icon styles */

#link::before {
    background: #333;
    content: "";
    height: 1em;
    margin-right: 0.5em;
    vertical-align: text-top;
    width: 1em;
    background-image: url(data:image/svg+xml;charset=utf-8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPjxzdmcgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIgd2lkdGg9IjEwcHgiIGhlaWdodD0iMTBweCIgdmlld0JveD0iMCAwIDEwIDEwIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCAxMCAxMCIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+PHBvbHlnb24gcG9pbnRzPSI1LDAgNi41NDUsMy4yOTIgMTAsMy44MiA3LjUsNi4zODIgOC4wOSwxMCA1LDguMjkyIDEuOTEsMTAgMi41LDYuMzgyIDAsMy44MiAzLjQ1NSwzLjI5MiIvPjwvc3ZnPg==) no-repeat;
}

/* Mouse over styles */

#link:not(:active):hover {
    background: #fff
}

#link:not(:active):hover::before {
    background: -webkit-gradient(
        linear,
        left top,
        right bottom,
        from(#f99),
   ...