How to add circle shape to CSS button

Question

I hope someone can help me with this.

I need to put a circle on top of the css button. Is there any way to do that within the "a" below? Thanks!

When I try to add this...

width: 10px;
height: 10px;
background: red;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 50px;

It pushes the button shape out of whack.I'm trying to shoot for a pure css button with a circle shape layered on top.

a {
    font-size:23px;
    font-family:Arial;
    font-weight:bold;
    -moz-border-radius:10px;
    -webkit-border-radius:10px;
    border-radius:10px;
    border:1px solid #dcdcdc;
    padding:14px 48px;
    text-decoration:none;
    background:-moz-linear-gradient( center top, #dcdcdc 47%, #b5b5b5 58% );
    background:-ms-linear-gradient( top, #dcdcdc 47%, #b5b5b5 58% );
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#dcdcdc', endColorstr='#b5b5b5');
    background:-webkit-gradient( linear, left top, left bottom, color-stop(47%, #dcdcdc), color-stop(58%, #b5b5b5) );
    background-color:#dcdcdc;
    color:#555555;
    display:inline-block;
    text-shadow:0px 1px 1px #ffffff;
}

.css_btn_class:hover {
    background:-moz-linear-gradient( center top, #b5b5b5 47%, #dcdcdc 58% );
    background:-ms-linear-gradient( top, #b5b5b5 47%, #dcdcdc 58% );
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#b5b5b5', endColorstr='#dcdcdc');
    background:-webkit-gradient( linear, left top, left bottom, color-stop(47%, #b5b5b5), color-stop(58%, #dcdcdc) );
    background-color:#b5b5b5;
}

.css_btn_class:active {
    position:relative;
    top:1px;
}

Answer 1

You can add a circle shape on top of your <a> link by using the :before selector.

a {
    position: relative;
}
a:before {
    content: '';
    width: 10px;
    height: 10px;
    background: red;
    -moz-border-radius: 50px;
    -webkit-border-radius: 50px;
    border-radius: 50px;
    position: absolute;
    top: 6px;
    right: 9px;
}

Demo