How to add circle shape to CSS button


Tags: css,css3,css-shapes

Problem :

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;
}


Solution :

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


    CSS Howto..

    How to inline the contents of an entire stylesheet with Wordpress?

    Using CSS, how to rotate a 3D box 180 degrees on mouse enter and continue to 360 on leave?

    How to create an easy responsive grid with one column and two boxes?

    How can I add background color to CSS triangles?

    How to use a background image in Webfolio WordPress theme without breaking CSS header?

    How to achieve this button-border effect with CSS? (image included)

    Background color does not show up when scrolling to the right

    how to hover after calling jquery animate()

    How can I vertically align the text on these CSS buttons?

    Show Pinterest hover buttons only on images with specified class

    How to calculate sine, cosine in Less?

    How to center nav using CSS/HTML? [closed]

    How to auto position sidenav in twitter bootstrap while sliding

    How to display Bootstrap button label vertically using CSS?

    How do I get the name of div a user must click to appear in a text div?

    How to match an index of a CSS class with JavaScript?

    CSS how to height step arrow

    What is WebKit and how is it related to CSS?

    How to use css and images to create a rounded header section in an HTML page?

    How to organize css files in a Joomla 2.5 template? [closed]

    How do I get my HTML page to display in the browser without horizontal and vertical scroll bars?

    How to create css based breadcrumb which supports IE8 [closed]

    How put a top border to a title that only cover the letters in css

    How to Tie Events to CSS

    How to do jasmine test case for display none css property using documet.getElementById and getElementsByClassName

    How do i shift the text in twitter bootstrap navbar to center?

    how to use css to display multiple posts in inline-block like google+

    How make something like Facebook Notifications?

    How to extend Navigation in CSS

    CSS how to change color of a specific primary-panel in a if-block