Pure Css schließen Knopf

Grundidee: Für die ein.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", um den Inhalt der enge Kiste.

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

Quick and dirty, aber funktioniert.

InformationsquelleAutor der Antwort binarious

Hallo, können Sie verwendet diesen code in reinem css

als wie diese

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/

InformationsquelleAutor der Antwort Rohit Azad

Die enttäuschende Sache ist hier, dass das "X" ist nicht transparent ist (was ich wäre wahrscheinlich erstellen Sie eine PNG, mindestens).

Ich zusammen in diesem schnellen test.
http://jsfiddle.net/UM3a2/22/embedded/result/ die Ihnen ermöglicht, die Farbe der positive Raum verlassen, während der negative Raum transparent. Da es vollständig aus den Grenzen ist es leicht zu Farbe, da border-color Standardeinstellungen, um die Farbe des Textes.

Es nicht in vollem Umfang unterstützen, I. E. 8 und älter (border-radius-Probleme), aber es degradiert auf einen Platz relativ gut (wenn Sie okay sind mit einem Platz in der Nähe-Taste).

Es erfordert auch zwei HTML-Elemente, da Sie nur erlaubt, zwei pseudo-Elemente pro Selektor. Ich weiß nicht genau, wo ich das gelernt, 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;
}

InformationsquelleAutor der Antwort Nick Saemenes

Nur ein Gedanke - wenn Sie nicht auf IE7, die Sie bekommen konnte, Weg mit jedes Bild wird base64-kodiert und eingebettet in css. Ich gehe davon aus, Ihr Ziel ist es zu vermeiden einen unnötigen http-request statt, tatsächlich eine css-button, mit seinem eigenen Ziel.

InformationsquelleAutor der Antwort o.v.

Ich Denke Es Ist Das Beste!

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>

InformationsquelleAutor der Antwort tawsif torabi