Pure css close button

Question

JSFiddle

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

enter image description here

CSS3 has round borders, so "maybe". Creating the X would depend on the presence of an appropriate font. — Marc B, Apr 04 '12 at 21:55
http://www.webdesignerdepot.com/2012/10/creating-a-modal-window-with-html5-and-css3/ — user18490, Jul 26 '14 at 15:31
I must admit that with the introduction of font-awesome, this has all become less important now... no need for 10000+ images anymore, one font file and you're covered. — Craig Wayne, Nov 25 '14 at 08:06

Mike Robinson · Accepted Answer · 2012-04-04T22:16:01.970

139

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: "×";
}

edited Apr 04 '12 at 22:16

answered Apr 04 '12 at 22:10

Mike Robinson

24,971
8
61
83

1

I would add -moz-border-radius to support firefox – Ozzy Apr 19 '12 at 21:24
1

@binarious well if you want to support FF <4 you should? – Ozzy Aug 01 '12 at 18:33
@Ozzy That version has been deprecated for quite a while. I see less than 0.1% of browser traffic coming from <4. – Mike Robinson Aug 01 '12 at 18:41
1

@MikeRobinson It's actually closer to 2% and it doesn't harm to add the extra line of code http://www.w3counter.com/globalstats.php?year=2012&month=6 – Ozzy Aug 01 '12 at 21:19
why did you show june's statistics in your link in august you cherry picked the link, not that it matters, now the firefox 3 useage is negligible and nickel and dining lines of code to support browsers can hurt you if it affects load time enough and more so if it affects the date you can realease your code because you are spending your time supporting outdated browsers – Shawn Aug 14 '13 at 14:28
6

@Shawn I spent all of 3 seconds finding that link. Honestly if people want to support older browsers they're welcome to add in the required fields; my solution is simply a solution for current browsers. – Mike Robinson Aug 14 '13 at 14:51
I just noticed you are using the unicode multiplication × `content: "×";` (equivalent to `content: "\00d7"`) instead of x/X. http://stackoverflow.com/a/17622391/436776 mentions other alternatives ✕ ✖ ❌ which may look better (but you would need to check your choice doesn't appear as ▯ depending on font, browser, and device). – robocat Jan 14 '16 at 04:34
Do you allow us to use it? – Jakob Alexander Eichler Dec 16 '19 at 19:16

score 45 · Answer 2 · edited Nov 07 '17 at 20:15

45

My attempt at a close icon, no text

.close-icon
{
  display:block;
  box-sizing:border-box;
  width:20px;
  height:20px;
  border-width:3px;
  border-style: solid;
  border-color:red;
  border-radius:100%;
  background: -webkit-linear-gradient(-45deg, transparent 0%, transparent 46%, white 46%,  white 56%,transparent 56%, transparent 100%), -webkit-linear-gradient(45deg, transparent 0%, transparent 46%, white 46%,  white 56%,transparent 56%, transparent 100%);
  background-color:red;
  box-shadow:0px 0px 5px 2px rgba(0,0,0,0.5);
  transition: all 0.3s ease;
}

<a href="#" class="close-icon"></a>

edited Nov 07 '17 at 20:15

Makyen

31,849
12
86
121

answered Nov 22 '13 at 07:56

Craig Wayne

4,499
4
35
50

How would i do just an X (not the circle background and color background) – user3808307 Feb 05 '20 at 20:10
@user3808307, change the `background` line with linear gradient (replace the white color with whatever you need) and remove the other properties that create the circle (background-color, border-radius, border-width, border-style, border-color, box-shadow) – Bogdan D May 25 '22 at 10:00

score 12 · Answer 3 · answered Apr 10 '15 at 13:54

I become frustrated trying to implement something that looked consistent in all browsers and went with an svg button which can be styled with css.

html

<svg>
    <circle cx="12" cy="12" r="11" stroke="black" stroke-width="2" fill="white" />
    <path stroke="black" stroke-width="4" fill="none" d="M6.25,6.25,17.75,17.75" />
    <path stroke="black" stroke-width="4" fill="none" d="M6.25,17.75,17.75,6.25" />
</svg>

css

svg {
    cursor: pointer;
    height: 24px;
    width: 24px;
}
svg > circle {
    stroke: black;
    fill: white;
}
svg > path {
    stroke: black;
}
svg:hover > circle {
    fill: red;
}
svg:hover > path {
    stroke: white;
}

http://jsfiddle.net/purves/5exav2m7/

score 9 · Answer 4 · answered Apr 04 '12 at 21:57

Basic idea: For the a.boxclose:

border-radius: 40px;
width:20px;
height 10px;
background-color: #c0c0c0;
border: 1px solid black;
color: white;
padding-left: 10px;
padding-top: 4px;

Adding a "X" to the content of the close box.

http://jsfiddle.net/adzFe/1/

Quick and dirty, but works.

score 6 · Answer 5 · answered Apr 05 '12 at 06:25

Hi you can used this code in pure css

as like this

css

.arrow {
cursor: pointer;
color: white;
border: 1px solid #AEAEAE;
border-radius: 30px;
background: #605F61;
font-size: 31px;
font-weight: bold;
display: inline-block;
line-height: 0px;
padding: 11px 3px;
}
.arrow:before{
 content: "×";
}

HTML

<a href="#" class="arrow"> 
</a>

Live demo http://jsfiddle.net/rohitazad/VzZhU/

Selvakumar Arumugam · Answer 6 · 2012-04-04T22:05:28.150

5

Edit: Updated css to match with what you have..

DEMO

HTML

<div>
    <span class="close-btn"><a href="#">X</a></span>
</div>

CSS

.close-btn {
    border: 2px solid #c2c2c2;
    position: relative;
    padding: 1px 5px;
    top: -20px;
    background-color: #605F61;
    left: 198px;
    border-radius: 20px;
}

.close-btn a {
    font-size: 15px;
    font-weight: bold;
    color: white;
    text-decoration: none;
}

edited Apr 04 '12 at 22:05

answered Apr 04 '12 at 21:58

Selvakumar Arumugam

79,297
15
120
134

score 2 · Answer 7 · answered Apr 25 '13 at 23:25

The disappointing thing here is that the "X" isn't transparent (which is how I would likely create a PNG, at least).

I put together this quick test. http://jsfiddle.net/UM3a2/22/embedded/result/ which allows you to color the positive space while leaving the negative space transparent. Since it is made entirely of borders it is easy to color since border-color defaults to the text color.

It doesn't fully support I.E. 8 and earlier (border-radius issues), but it degrades to a square fairly nicely (if you're okay with a square close button).

It also requires two HTML elements since you are only allowed two pseudo elements per selector. I don't know exactly where I learned this, but I think it was in an article by Chris Coyier.

<div id="close" class="arrow-t-b">
  Close
  <div class="arrow-l-r"> </div>
</div>

#close {
  border-width: 4px;
  border-style: solid;
  border-radius: 100%;
  color: #333;
  height: 12px;
  margin:auto;
  position: relative;
  text-indent: -9999px;
  width: 12px;
}
#close:hover {
  color: #39F;
}
.arrow-t-b:after,
.arrow-t-b:before,
.arrow-l-r:after, 
.arrow-l-r:before {
  border-color: transparent;
  border-style: solid;
  border-width: 4px;
  content: "";
  left: 2px;
  top: 0px;
  position: absolute;
}
.arrow-t-b:after {
  border-top-color: inherit;
}
.arrow-l-r:after {
  border-right-color: inherit;
  left: 4px;
  top: 2px;
}
.arrow-t-b:before {
  border-bottom-color: inherit;
  bottom: 0;
}
.arrow-l-r:before {
  border-left-color: inherit;
  left: 0;
  top: 2px;
}

This is good, but it's really difficult to customise, ie making the cross larger or the whole thing. — rick, Nov 05 '13 at 14:46
@rickibalboa It isn't *really* difficult, but it isn't terribly easy either. It is mostly just another approach to get brain juices flowing. — Nick Saemenes, Dec 19 '13 at 16:59

score 2 · Answer 8 · answered Jan 17 '14 at 11:56

You can create close (or any) button on http://www.cssbuttongenerator.com/. It gives you pure css value of button.
HTML

<span class="classname hightlightTxt">x</span>

CSS

<style type="text/css">
.hightlightTxt {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
}
.classname {
    -moz-box-shadow:inset 0px 3px 24px -1px #fce2c1;
    -webkit-box-shadow:inset 0px 3px 24px -1px #fce2c1;
    box-shadow:inset 0px 3px 24px -1px #fce2c1;
    background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ffc477), color-stop(1, #fb9e25) );
    background:-moz-linear-gradient( center top, #ffc477 5%, #fb9e25 100% );
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffc477', endColorstr='#fb9e25');
    background-color:#ffc477;
    -webkit-border-top-left-radius:20px;
    -moz-border-radius-topleft:20px;
    border-top-left-radius:20px;
    -webkit-border-top-right-radius:20px;
    -moz-border-radius-topright:20px;
    border-top-right-radius:20px;
    -webkit-border-bottom-right-radius:20px;
    -moz-border-radius-bottomright:20px;
    border-bottom-right-radius:20px;
    -webkit-border-bottom-left-radius:20px;
    -moz-border-radius-bottomleft:20px;
    border-bottom-left-radius:20px;
    text-indent:0px;
    border:1px solid #eeb44f;
    display:inline-block;
    color:#ffffff;
    font-family:Arial;
    font-size:28px;
    font-weight:bold;
    font-style:normal;
    height:32px;
    line-height:32px;
    width:32px;
    text-decoration:none;
    text-align:center;
    text-shadow:1px 1px 0px #cc9f52;
}
.classname:hover {
    background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #fb9e25), color-stop(1, #ffc477) );
    background:-moz-linear-gradient( center top, #fb9e25 5%, #ffc477 100% );
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fb9e25', endColorstr='#ffc477');
    background-color:#fb9e25;
}.classname:active {
    position:relative;
    top:1px;
}</style>
/* This button was generated using CSSButtonGenerator.com */

score 1 · Answer 9 · edited May 23 '17 at 12:18

1

Just a thought - if you're not targeting IE7, you could get away with any image being base64-encoded and embedded into css. I'm assuming your goal is to avoid an unnecessary http request rather than to actually make a css button as its own goal.

edited May 23 '17 at 12:18

Community

1
1

answered Apr 05 '12 at 07:21

Oleg

24,465
8
61
91

score 0 · Answer 10 · answered Apr 05 '12 at 00:11

0

If you want pure css, without the letter "x"....

Here are some awesome experimental icons that include an "x" in a circle that is made with CSS: http://nicolasgallagher.com/pure-css-gui-icons/demo/

answered Apr 05 '12 at 00:11

Beth Budwig

114
6

tawsif torabi · Answer 11 · 2016-08-19T12:45:15.510

I Think It Is Best!

And Use The Simple JS to make this work.

<script>
function privacypolicy(){
    var privacypolicy1 = document.getElementById('privacypolicy');
    var privacypolicy2 = ('display: inline;');
    privacypolicy1.style= privacypolicy2;
}
function hideprivacypolicy(){
    var privacypolicy1 = document.getElementById('privacypolicy');
    var privacypolicy2 = ('display: none;');
    privacypolicy1.style= privacypolicy2;
}
</script>
<style type="text/css">
            .orthi-textlightbox-background{
                background-color: rgba(30, 23, 23, 0.82);
                font-family: siyam rupali; 
                position: fixed; top:0px; 
                bottom:0px; 
                right:0px; 
                width: 100%; 
                border: none; 
                margin:0; 
                padding:0; 
                overflow: hidden; 
                z-index:999999; 
                height: 100%;
                }

                .orthi-textlightbox-area {
                background-color: #fff;
                position: absolute;
                width: 50%;
                left: 300px;
                top: 200px;
                padding: 20px 10px;
                border-radius: 6px;
                }
                .orthi-textlightbox-area-close{
                font-weight: bold;
                background-color:black;
                color: white;
                border-radius: 50%;
                padding: 10px;
                float: right;
                border: 1px solid black;
                box-shadow: 0 0 10px 0 rgba(33, 157, 216, 0.82);
                margin-top:-30px;
                margin-right:-30px;
                cursor:pointer;
                }
</style>
<button onclick="privacypolicy()">Show Content</button>
<div id="privacypolicy" class="orthi-textlightbox-background" style="display:none;">
<div class="orthi-textlightbox-area">
LOL<button class="orthi-textlightbox-area-close" onclick="hideprivacypolicy()">×</button>
</div>
</div>

Pure css close button

JSFiddle

11 Answers11

Linked