Bouton css pur

Question

JSFiddle

Y at-il un moyen de faire quelque chose comme le X sur ce lien avec du css pur?

Answer 1

J'ai passé plus de temps que prévu sur ce sujet et je n'ai pas testé IE pour des raisons évidentes. Cela étant dit, c'est à peu près identique.

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

Answer 2

ma tentative d'icône de fermeture, pas de texte

 <a href="#" class="close-icon"></a>
<style>

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

Answer 3

Idée de base: Pour le a.boxclose:

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

Ajout d'un "X" au contenu de la case de fermeture.

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

Rapide et sale, mais fonctionne.

Answer 4

Bonjour, vous pouvez utiliser ce code en pure css

comme ça

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>
 

Démo en direct http://jsfiddle.net/rohitazad/VzZhU/

Answer 5

Edit: css mis à jour pour correspondre à ce que vous avez ..

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