CSS - using css object instead of background-image -

i have button class styled in css, in background image used, 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 simple - it's orange circle. want draw in css instead, avoid using external asset. thought of using following css object (which draws orange circle):

#circle {     width: 100px;     height: 100px;     background: orange;     -moz-border-radius: 50px;     -webkit-border-radius: 50px;     border-radius: 50px; } 

is there way use in such way, behave background-image .png? (i know make button class in have drawn button differently want reuse button class available).

how using svg in data uri? here's fiddle showing example , code used generate (the link 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);