web-dev-qa-db-de.com

Reine CSS-Schaltfläche zum Schließen

JSFiddle

Gibt es eine Möglichkeit, so etwas wie das X in dieser Verknüpfung mit reinem CSS zu erstellen?

enter image description here

72
qwertymk

Ich habe mehr Zeit damit verbracht, als ich sollte, und habe es aus offensichtlichen Gründen nicht in IE getestet. Abgesehen davon ist es ziemlich identisch.

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

Mein Versuch ein Icon zu schließen, kein 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>
35
Craig Wayne

Grundidee: Für die a.boxclose:

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

Hinzufügen eines "X" zum Inhalt des Schließfelds.

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

Schnell und dreckig, funktioniert aber.

9
binarious

Ich bin frustriert, wenn ich versuche, etwas zu implementieren, das in allen Browsern konsistent aussieht, und habe eine SVG-Schaltfläche verwendet, die mit CSS gestaltet werden kann.

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/

9
Chris Purves

Hallo, du kannst diesen Code in reinem CSS verwenden

so wie das

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/

6
Rohit Azad

Bearbeiten: Aktualisierte CSS, um mit dem übereinzustimmen, was Sie haben.

[~ # ~] 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;
}
5

Das Enttäuschende dabei ist, dass das "X" nicht transparent ist (so würde ich wahrscheinlich zumindest ein PNG erstellen).

Ich habe diesen Schnelltest zusammengestellt. http://jsfiddle.net/UM3a2/22/embedded/result/ Damit können Sie den positiven Raum einfärben, während Sie den negativen Raum transparent lassen. Da es vollständig aus Rändern besteht, ist es einfach einzufärben, da die Randfarbe standardmäßig der Textfarbe entspricht.

I.E. wird nicht vollständig unterstützt. 8 und früher (Rand-Radius-Probleme), aber es verschlechtert sich ziemlich gut zu einem Quadrat (wenn Sie mit einem Quadrat-Schließen-Button einverstanden sind).

Außerdem sind zwei HTML-Elemente erforderlich, da Sie nur zwei Pseudoelemente pro Selektor zulassen. Ich weiß nicht genau, wo ich das gelernt habe, aber ich glaube, es war in einem Artikel von 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;
}
2
Nick Saemenes

Sie können close (oder eine beliebige) Schaltfläche auf http://www.cssbuttongenerator.com/ erstellen. Es gibt Ihnen reinen CSS-Wert der Schaltfläche.
[~ # ~] 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 */
2
Ikrom

Nur ein Gedanke - wenn Sie nicht auf IE7 abzielen, könnten Sie mit jedem Image davonkommen, das base64-codiert und in css eingebettet ist . Ich gehe davon aus, dass Ihr Ziel darin besteht, eine unnötige http-Anforderung zu vermeiden, anstatt eine CSS-Schaltfläche als eigenes Ziel festzulegen.

1
o.v.

Ich denke, es ist am besten!

Und verwenden Sie die einfache JS, um diese Arbeit zu machen.

<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>
0
tawsif torabi

Wenn Sie reines CSS wollen, ohne den Buchstaben "x" ....

Hier sind einige fantastische experimentelle Symbole, die ein "x" in einem mit CSS erstellten Kreis enthalten: http://nicolasgallagher.com/pure-css-gui-icons/demo/

0
Beth Budwig