Pure css close button

qwertymk picture qwertymk · Apr 4, 2012 · Viewed 165.3k times · Source

JSFiddle

Is there any way to make something like the X on that link with pure css?

enter image description here

Answer

Mike Robinson picture Mike Robinson · Apr 5, 2012

I spent more time on this than I should have, and haven't tested in IE for obvious reasons. That being said, it's pretty much identical.

http://jsfiddle.net/adzFe/14/

a.boxclose{
    float:right;
    margin-top:-30px;
    margin-right:-30px;
    cursor:pointer;
    color: #fff;
    border: 1px solid #AEAEAE;
    border-radius: 30px;
    background: #605F61;
    font-size: 31px;
    font-weight: bold;
    display: inline-block;
    line-height: 0px;
    padding: 11px 3px;       
}

.boxclose:before {
    content: "×";
}