纯css关闭按钮答案

【问题标题】：Pure css close button纯css关闭按钮
【发布时间】：2012-04-04 21:53:33
【问题描述】：

JSFiddle

有没有什么方法可以用纯 css 在那个链接上制作类似 X 的东西？

【问题讨论】：

CSS3 有圆形边框，所以“也许”。创建 X 将取决于是否存在适当的字体。
webdesignerdepot.com/2012/10/…
我必须承认，随着 font-awesome 的引入，这一切现在变得不那么重要了……不再需要 10000 多张图片，一个字体文件就可以了。

标签： javascript jquery css overlay

【解决方案1】：

我在这方面花费的时间比我应该做的要多，并且由于明显的原因没有在 IE 中进行测试。话虽这么说，它几乎是相同的。

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

【讨论】：

我会添加 -moz-border-radius 以支持 firefox
@binarious 如果你想支持 FF
@Ozzy 该版本已经被弃用了一段时间。我发现不到 0.1% 的浏览器流量来自
@MikeRobinson 实际接近2%，加上额外的代码行w3counter.com/globalstats.php?year=2012&month=6
@Shawn 我花了 3 秒钟的时间找到那个链接。老实说，如果人们想支持旧版浏览器，欢迎在必填字段中添加；我的解决方案只是针对当前浏览器的解决方案。

【解决方案2】：

我尝试关闭图标，没有文字

.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;
}

&lt;a href="#" class="close-icon"&gt;&lt;/a&gt;

【讨论】：

我将如何只做一个 X（不是圆形背景和彩色背景）

【解决方案3】：

我在尝试实现在所有浏览器中看起来一致的东西并使用可以用 css 设置样式的 svg 按钮时感到沮丧。

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/

【讨论】：

【解决方案4】：

基本思路：对于a.boxclose：

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

在关闭框的内容中添加一个“X”。

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

又快又脏，但是很管用。

【讨论】：

【解决方案5】：

您好，您可以在纯 css 中使用此代码

像这样

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>

现场演示http://jsfiddle.net/rohitazad/VzZhU/

【讨论】：

【解决方案6】：

编辑：更新了 css 以匹配你所拥有的..

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;
}

【讨论】：

【解决方案7】：

这里令人失望的是“X”不透明（至少我可能会这样创建 PNG）。

我整理了这个快速测试。 http://jsfiddle.net/UM3a2/22/embedded/result/ 允许您在使负空间透明的同时为正空间着色。由于它完全由边框组成，因此很容易着色，因为边框颜色默认为文本颜色。

它不完全支持 I.E. 8 和更早版本（边框半径问题），但它会很好地退化为正方形（如果您对方形关闭按钮没问题的话）。

它还需要两个 HTML 元素，因为每个选择器只允许两个伪元素。我不知道我是从哪里学到的，但我认为这是在 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;
}

【讨论】：

这很好，但很难定制，即将十字架变大或整个东西。
@rickibalboa 这不是真的困难，但也不是很容易。这主要是另一种让脑汁流动的方法。

【解决方案8】：

您可以在http://www.cssbuttongenerator.com/ 上创建close（或任何）按钮。它为您提供按钮的纯 css 值。
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 */

【讨论】：

【解决方案9】：

只是一个想法 - 如果您不针对 IE7，则可以使用any image being base64-encoded and embedded into css。我假设您的目标是避免不必要的 http 请求，而不是实际将 css 按钮作为自己的目标。

【讨论】：

【解决方案10】：

如果你想要纯 css，没有字母“x”....

这里有一些很棒的实验性图标，其中包含一个用 CSS 制作的圆圈中的“x”：http://nicolasgallagher.com/pure-css-gui-icons/demo/

【讨论】：

【解决方案11】：

我认为这是最好的！

并使用 Simple JS 来完成这项工作。

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

【讨论】：