Кнопка "закрыть" на чистом CSS
11 ответов
Я потратил на это больше времени, чем должен был, и не тестировал в IE по очевидным причинам. Это, как говорится, в значительной степени идентично.
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: "×";
}
моя попытка закрыть значок без текста
.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>основная идея: для 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"в содержимое окна закрытия.
быстрый и грязный, но работает.
Я расстраиваюсь, пытаясь реализовать что-то, что выглядело согласованным во всех браузерах и шло с кнопкой svg, которая может быть стилизована с помощью 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;
}
привет вы можете использовать этот код в чистом 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>
Live demo http://jsfiddle.net/rohitazad/VzZhU/
Edit: обновлен css в соответствии с тем, что у вас есть..
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;
}
разочаровывает то, что" X " не является прозрачным (как я, вероятно, создал бы PNG, по крайней мере).
Я собрал этот быстрый тест. http://jsfiddle.net/UM3a2/22/embedded/result/ что позволяет вам покрасить положительный космос пока выходящ отрицательный космос прозрачным. Поскольку он полностью состоит из границ, его легко раскрасить, поскольку цвет границы по умолчанию равен цвету текста.
Он не полностью поддерживает I. E. 8 и более ранние версии (проблемы с радиусом границы), но он довольно хорошо деградирует до квадрата (если вы в порядке с квадратной кнопкой закрытия).
Он также требует двух элементов HTML, так как вам разрешено только два псевдоэлемента на селектор. Я не знаю точно, где я это узнал, но я думаю, что это было в статье Криса Койера.
<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;
}
вы можете создать close (или любая) кнопка на http://www.cssbuttongenerator.com/. Это дает вам чистое значение 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 */
просто мысль-если вы не нацелены на IE7, вам может сойти с рук любое изображение, закодированное в base64 и встроенное в css. Я предполагаю, что ваша цель-избежать ненужного http-запроса, а не фактически сделать кнопку css своей собственной целью.
Если вы хотите чистый css, без буквы "x"....
вот некоторые удивительные экспериментальные значки, которые включают " x " в круг, который сделан с помощью CSS:http://nicolasgallagher.com/pure-css-gui-icons/demo/
Я Думаю, Что Это Лучше Всего!
и используйте простой 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>