How To Get This Hover Effect With Just Css

I've already got the circle part. I set a background color of black on the div. and for the text, I set a:hover as the color shown. I just can't figure out how do I set a:hover f

Solution 1:

Do you need something like this?

Demo

A better looking demo

You can use a white border too

Demo with transitions

div {
    height: 100px;
    width: 100px;
    border-radius: 50%;
    border: 10px solid transparent;
    color: #fff;
    background: #515151;
}

div:hover {
    border: 10px solid #FF4800;
    color: #FF4800;
}

Am having a fixed width element with a transparent border, so that my element doesn't move on hover, you can also set the elements border to match the background color, and last but not the least, on hover, I simply change the border color to #FF4800, I've also added transition example, if you want smoothness on hover .

---

Still if you don't want the elements background-color to span more 10px because of the transparent border, and you do not want to set the border-color to match the background color, you can use CSS content property like this

Demo (content with :after pseudo)

div {
    height: 100px;
    width: 100px;
    border-radius: 50%;
    color: #fff;
    background: #515151;
    text-align: center;
    line-height: 100px;
    font-size: 20px;
    font-family: Arial;
    position: relative;
    margin: 30px;
}

div:hover:after {
    border: 10px solid #FF4800;
    color: #FF4800;
}

div:after {
    content: "";
    display: block;
    height: 100px;
    width: 100px;
    position: absolute;
    left: -10px;
    top: -10px;
    border: 10px solid transparent;
    border-radius: 50%;
}

Solution 2:

Convert these two images into one single image and use CSS sprite technique by changing the background-position on hover. Thats it.

Solution 3:

And as for the background change:

div {
background: url(image.png);
}

div:hover {
background: url(hoverimage.png);
}

Solution 4:

You could Do it with border-radius

Demo http://jsfiddle.net/fYfwH/