CODEWITHSUNDEEP
htmlcss
user3461434
user3461434

Reputation: 174

Drawing a circle in a submit button

http://jsfiddle.net/GWGFy/

Is it possible to draw a circle inside the button on hover? I know I can do it by having a few div elements and JS, but maybe there's another, easier way?

input[type=submit] {
    width: 101px; height: 16px;
    background-color: #f68830;
    webkit-border-radius: 9px; -moz-border-radius: 9px; border-radius: 9px;
    border: none; cursor:pointer;
}

Upvotes: 0

Views: 1073

Answers (2)

Amir5000
Amir5000

Reputation: 1728

Since it is an Input object we can't use CSS :before and :after pseudo elements so the closest thing I could think of without physically adding a div was adding it on hover using jQuery and then removing it once they leave like this:

$('input[type=submit], div.circle').mouseenter(function() {
  $(this).before('<div class="circle">&nbsp;</div>');
});
$('input[type=submit], div.circle').mouseleave(function() {
  $('div.circle').remove(); 
});

CSS to style the new div

div.circle {
background-color: #FFFFFF;
border-radius: 16px;
height: 15px;
left: 50px;
position: absolute;
top: 10px;
width: 15px;
z-index: 99;
}

Here is a JSFiddle with my example Hope that is what you need.

Upvotes: 1

user3461434
user3461434

Reputation: 174

As Niet The Dark Absol answered in the comments: http://jsfiddle.net/GWGFy/2/

button[type=submit]:hover::after {
    display:inline-block;
    content:'';
    width:12px;
    height:12px;
    vertical-align:middle;
    background-color: #145;
    border-radius: 50%;
}

Upvotes: 1

Related Questions