CSS - using css object instead of background-image - css

Question

I have a button class styled in css, in which background image is used, like this:
.button {
display: block;
background-position: center;
background-size: 30px 28px;
background-repeat: no-repeat;
background-color: transparent;
border: 0;
width: 100%;
background-image: url('foo.png');
}
The shape in .png is really simple - it's just an orange circle. So I want to draw it in css instead, to avoid using external asset. So I thought of using the following css object (which draws an orange circle):
#circle {
width: 100px;
height: 100px;
background: orange;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 50px;
}
Is there some way to use that in such a way, that it would behave exactly as the background-image .png? (I know I could just make another button class in which I would have drawn the button differently but I want to reuse the button class already available).

Answer 1

This can be achieved using a pseudo element, I made a fiddle. You can play with the dimensions of course.
.button {
display: block;
border: 0;
width: 300px;
height: 200px;
position: relative;
background: transparent;
/* just to show where the button is */
border:1px solid #000;
}
.button:before {
content: '';
display: block;
background: orange;
border-radius: 50%;
height: 100px;
width: 100px;
/* make sure background is behind text */
z-index: -1;
/* center circle in button, negative margins = half of circle dimensions */
position: absolute;
top: 50%;
left: 50%;
margin: -50px 0 0 -50px;
}

Answer 2

How about using SVG in a data URI? Here's a fiddle showing the example and the code used to generate it (the link is just 194 characters long):
var svg = '<svg xmlns="http://www.w3.org/2000/svg" width="30" height="28">'
+ '<ellipse cx="15" cy="14" rx="15" ry="14" fill="orange"/></svg>';
location.href = 'data:image/svg+xml;base64,' + btoa(svg);