Clean css close button

Question

Jsfiddle

Is there a way to do something like X in this link with pure css?

Answer 1

I spent more time on this than it should, and did not check in IE for obvious reasons. Moreover, it is almost 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: "×"; } 

Answer 2

My attempt to close the icon, without 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> 

Answer 3

Main idea: for 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 an "X" to the contents of the close box

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

Quick and dirty, but it works.

Answer 4

I am upset trying to implement something that looked consistent across all browsers, and went off with the svg button, which can be written using 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/

Answer 5

Hi, you can use this code in pure css

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/

Answer 6

Edit: Updated css to match 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; } 

Answer 7

The disappointing thing here is that the "X" is not transparent (as I probably create PNG, at least).

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

This does not fully support IE 8 and earlier (problems with radius radius), but it falls pretty nicely onto the square (if you're ok with the square close button).

It also requires two HTML elements, since you are only allowed to use two pseudo-elements for each selector. I don’t know exactly where I found out, but I think it was in an article by Chris Coyer.

 <div id="close" class="arrow-tb"> Close <div class="arrow-lr"> </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-tb:after, .arrow-tb:before, .arrow-lr:after, .arrow-lr:before { border-color: transparent; border-style: solid; border-width: 4px; content: ""; left: 2px; top: 0px; position: absolute; } .arrow-tb:after { border-top-color: inherit; } .arrow-lr:after { border-right-color: inherit; left: 4px; top: 2px; } .arrow-tb:before { border-bottom-color: inherit; bottom: 0; } .arrow-lr:before { border-left-color: inherit; left: 0; top: 2px; } 

Answer 8

You can create a close button (or any) at http://www.cssbuttongenerator.com/ . This gives you a clean css button value.
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 */ 

Answer 9

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

Here are some amazing experimental icons that include an “x” in a circle that is made using CSS: http://nicolasgallagher.com/pure-css-gui-icons/demo/

Answer 10

Just a thought - if you are not targeting IE7, you can do without any base64 encoded image and built in css . I assume your goal is to avoid an unnecessary HTTP request, and not actually make the css button as your own goal.

Answer 11

I think this is the best!

And use 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>