Reine CSS-Schaltfläche zum Schließen

75

JSFiddle

Gibt es eine Möglichkeit, so etwas wie das X auf diesem Link mit reinem CSS zu erstellen?

Geben Sie hier die Bildbeschreibung ein

qwertymk
quelle
1
CSS3 hat runde Ränder, also "vielleicht". Das Erstellen des X hängt vom Vorhandensein einer geeigneten Schriftart ab.
Marc B
Ich muss zugeben, dass mit der Einführung von font-awesome alles jetzt weniger wichtig geworden ist ... es sind keine mehr als 10000 Bilder mehr erforderlich, eine Schriftartdatei und Sie sind abgesichert.
Craig Wayne

Antworten:

136

Ich habe mehr Zeit damit verbracht, als ich sollte, und habe aus offensichtlichen Gründen nicht im IE getestet. Davon abgesehen 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: "×";
}
Mike Robinson
quelle
1
Ich würde -moz-border-radius hinzufügen, um Firefox zu unterstützen
Ozzy
1
@binarious gut, wenn Sie FF <4 unterstützen möchten, sollten Sie?
Ozzy
@ Ozzy Diese Version ist seit einiger Zeit veraltet. Ich sehe weniger als 0,1% des Browserverkehrs von <4.
Mike Robinson
1
@ MikeRobinson Es ist tatsächlich näher an 2% und es schadet nicht, die zusätzliche Codezeile w3counter.com/globalstats.php?year=2012&month=6
Ozzy
6
@Shawn Ich habe alle 3 Sekunden damit verbracht, diesen Link zu finden. Wenn Benutzer ältere Browser unterstützen möchten, können sie diese gerne in die erforderlichen Felder einfügen. Meine Lösung ist einfach eine Lösung für aktuelle Browser.
Mike Robinson
39

Mein Versuch, ein Symbol 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>

Craig Wayne
quelle
Wie würde ich nur ein X machen (nicht den
Kreishintergrund
10

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/

Chris Purves
quelle
9

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 schmutzig, funktioniert aber.

binär
quelle
6

Hallo, Sie können diesen Code in reinem CSS verwenden

so

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/

Rohit Azad Malik
quelle
5

Bearbeiten: CSS aktualisiert, 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;
}
Selvakumar Arumugam
quelle
2

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/ , mit dem Sie den positiven Raum einfärben und den negativen Raum transparent lassen können. Da es vollständig aus Rändern besteht, ist es leicht zu färben, da die Randfarbe standardmäßig die Textfarbe ist.

IE 8 und frühere Versionen werden nicht vollständig unterstützt (Probleme mit dem Randradius), aber es wird ziemlich gut zu einem Quadrat degradiert (wenn Sie mit einer Schaltfläche zum Schließen eines Quadrats einverstanden sind).

Außerdem sind zwei HTML-Elemente erforderlich, da nur zwei Pseudoelemente pro Selektor zulässig sind. Ich weiß nicht genau, wo ich das gelernt habe, aber ich denke, 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;
}
Nick Saemenes
quelle
Das ist gut, aber es ist wirklich schwierig anzupassen, dh das Kreuz größer zu machen oder das Ganze.
Rickh
@rickibalboa Es ist nicht wirklich schwierig, aber es ist auch nicht besonders einfach. Es ist meistens nur ein anderer Ansatz, um Gehirnsäfte zum Fließen zu bringen.
Nick Saemenes
2

Sie können eine closeSchaltfläche (oder eine beliebige) auf http://www.cssbuttongenerator.com/ erstellen . Es gibt Ihnen den 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 */
Ikrom
quelle
0

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/

Beth Budwig
quelle
0

Ich denke, es ist am besten!

Und verwenden Sie The Simple JS, damit dies funktioniert.

<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>
Tawsif Torabi
quelle