X close button only using css

Question

How to make a cross  X  only in CSS3  to use as a close button  I ve been searching for a long time  and cannot found how     When I look at source code on a website using it  there s always something weird which makes the code I take unusable  The X button I want  http   tympanus net Tutorials ThumbnailGridExpandingPreview  When you click an image  this is the cross on the right   I think this would be great if somebody can post a simple universal CSS code to make a simple X cross in CSS3

User · Answer

Here s some variety for you with several sizes and hover animations   demo link      lt ul gt     lt li gt Large lt  li gt     lt li gt Medium lt  li gt     lt li gt Small lt  li gt     lt li gt Switch lt  li gt   lt  ul gt    lt ul gt     lt li class  ele  gt       lt div class  x large  gt  lt b gt  lt  b gt  lt b gt  lt  b gt  lt b gt  lt  b gt  lt b gt  lt  b gt  lt  div gt       lt div class  x spin large  gt  lt b gt  lt  b gt  lt b gt  lt  b gt  lt b gt  lt  b gt  lt b gt  lt  b gt  lt  div gt       lt div class  x spin large slow  gt  lt b gt  lt  b gt  lt b gt  lt  b gt  lt b gt  lt  b gt  lt b gt  lt  b gt  lt  div gt       lt div class  x flop large  gt  lt b gt  lt  b gt  lt b gt  lt  b gt  lt b gt  lt  b gt  lt b gt  lt  b gt  lt  div gt       lt div class  x t large  gt  lt b gt  lt  b gt  lt b gt  lt  b gt  lt b gt  lt  b gt  lt b gt  lt  b gt  lt  div gt       lt div class  x shift large  gt  lt b gt  lt  b gt  lt b gt  lt  b gt  lt b gt  lt  b gt  lt b gt  lt  b gt  lt  div gt     lt  li gt     lt li class  ele  gt       lt div class  x medium  gt  lt b gt  lt  b gt  lt b gt  lt  b gt  lt b gt  lt  b gt  lt b gt  lt  b gt  lt  div gt       lt div class  x spin medium  gt  lt b gt  lt  b gt  lt b gt  lt  b gt  lt b gt  lt  b gt  lt b gt  lt  b gt  lt  div gt       lt div class  x spin medium slow  gt  lt b gt  lt  b gt  lt b gt  lt  b gt  lt b gt  lt  b gt  lt b gt  lt  b gt  lt  div gt       lt div class  x flop medium  gt  lt b gt  lt  b gt  lt b gt  lt  b gt  lt b gt  lt  b gt  lt b gt  lt  b gt  lt  div gt       lt div class  x t medium  gt  lt b gt  lt  b gt  lt b gt  lt  b gt  lt b gt  lt  b gt  lt b gt  lt  b gt  lt  div gt       lt div class  x shift medium  gt  lt b gt  lt  b gt  lt b gt  lt  b gt  lt b gt  lt  b gt  lt b gt  lt  b gt  lt  div gt      lt  li gt     lt li class  ele  gt       lt div class  x small  gt  lt b gt  lt  b gt  lt b gt  lt  b gt  lt b gt  lt  b gt  lt b gt  lt  b gt  lt  div gt       lt div class  x spin small  gt  lt b gt  lt  b gt  lt b gt  lt  b gt  lt b gt  lt  b gt  lt b gt  lt  b gt  lt  div gt       lt div class  x spin small slow  gt  lt b gt  lt  b gt  lt b gt  lt  b gt  lt b gt  lt  b gt  lt b gt  lt  b gt  lt  div gt       lt div class  x flop small  gt  lt b gt  lt  b gt  lt b gt  lt  b gt  lt b gt  lt  b gt  lt b gt  lt  b gt  lt  div gt       lt div class  x t small  gt  lt b gt  lt  b gt  lt b gt  lt  b gt  lt b gt  lt  b gt  lt b gt  lt  b gt  lt  div gt       lt div class  x shift small  gt  lt b gt  lt  b gt  lt b gt  lt  b gt  lt b gt  lt  b gt  lt b gt  lt  b gt  lt  div gt       lt div class  x small grow  gt  lt b gt  lt  b gt  lt b gt  lt  b gt  lt b gt  lt  b gt  lt b gt  lt  b gt  lt  div gt      lt  li gt     lt li class  ele  gt       lt div class  x switch  gt  lt b gt  lt  b gt  lt b gt  lt  b gt  lt b gt  lt  b gt  lt b gt  lt  b gt  lt  div gt     lt  li gt   lt  ul gt    css   ele div x   -webkit-transition-duration 0 5s    transition-duration 0 5s      ele div x slow   -webkit-transition-duration 1s    transition-duration 1s     ul   list-style none float left display block width 100     li   display inline width 25  float left     ele   width 25  display inline     x     float left    position relative    margin 0    padding 0    overflow hidden    background  CCC    border-radius 2px    border solid 2px  FFF    transition  all  3s ease-out    cursor pointer     x large      width 30px    height 30px      x medium     width 20px    height 20px      x small     width 10px    height 10px      x switch     width 15px    height 15px     x grow        x spin hover    background  BB3333    transform  rotate 180deg      x flop hover    background  BB3333    transform  rotate 90deg      x t hover    background  BB3333    transform  rotate 45deg      x shift hover    background  BB3333      x b    display block    position absolute    height 0    width 0    padding 0    margin 0     x small b     border solid 5px rgba 255 255 255 0      x medium b     border solid 10px rgba 255 255 255 0      x large b     border solid 15px rgba 255 255 255 0      x switch b     border solid 10px rgba 255 255 255 0       x b nth-child 1     border-top-color  FFF    top -2px     x b nth-child 2     border-left-color  FFF    left -2px     x b nth-child 3     border-bottom-color  FFF    bottom -2px     x b nth-child 4     border-right-color  FFF    right -2px

User · Answer

Here s a good drop-in solution for perfectly centered circular X icon buttons  Using only CSS Not relying on a font The thickness and length of the tines of the X can be configured without affecting centering  using width and height in the pseudo element rule  close  before   close  after Screen reader support using aria-label Works on a light or dark background by using transparent grays and currentColor to adapt to the current text color specified on the button or an ancestor    x000D   x000D   close       vertical-align  middle      border  none      color  inherit      border-radius  50       background  transparent      position  relative      width  32px      height  32px      opacity  0 6     close focus   close hover       opacity  1      background  rgba 128  128  128  0 5      close active       background  rgba 128  128  128  0 9        tines of the X     close  before   close  after       content           position  absolute      top  50       left  50       height  20px      width  4px      background-color  currentColor     close  before       transform  translate -50   -50   rotate 45deg      close  after       transform  translate -50   -50   rotate -45deg     x000D   lt div style  padding  15px  gt       lt button class  close  aria-label  Close  gt  lt  button gt   lt  div gt   lt div style  background  black  color  white  padding  15px  gt       lt button class  close  aria-label  Close  gt  lt  button gt   lt  div gt   lt div style  background  orange  color  yellow  padding  15px  gt       lt button class  close  aria-label  Close  gt  lt  button gt   lt  div gt  x000D   x000D   x000D

User · Answer

x000D   x000D   lt div style  width  10px  height  10px  position  relative  display  flex  justify-content  center   gt      lt div style  width  1 5px  height  100   background-color   9c9f9c  position  absolute  transform  rotate 45deg   border-radius  2px   gt  lt  div gt      lt div style  width  1 5px  height  100   background-color   9c9f9c  position  absolute  transform  rotate -45deg   border-radius  2px   gt  lt  div gt   lt  div gt  x000D   x000D   x000D

User · Answer

Main point you are looking for is    tag-remove  before     content   x      here is your X cross  sign    color   fff    font-weight  300    font-family  Arial  sans-serif      FYI  you can make a close button by yourself very easily    x000D   x000D   mdiv   x000D    width  25px  x000D    height  25px  x000D    background-color  red  x000D    border  1px solid black  x000D    x000D   x000D   mdiv   x000D    height  25px  x000D    width  2px  x000D    margin-left  12px  x000D    background-color  black  x000D    transform  rotate 45deg   x000D    Z-index  1  x000D    x000D   x000D   md   x000D    height  25px  x000D    width  2px  x000D    background-color  black  x000D    transform  rotate 90deg   x000D    Z-index  2  x000D    x000D   lt div id  mdiv  gt  x000D     lt div class  mdiv  gt  x000D       lt div class  md  gt  lt  div gt  x000D     lt  div gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

You can use svg    x000D   x000D   lt svg viewPort  0 0 12 12  version  1 1  x000D       xmlns  http   www w3 org 2000 svg  gt  x000D       lt line x1  1  y1  11   x000D            x2  11  y2  1   x000D            stroke  black   x000D            stroke-width  2   gt  x000D       lt line x1  1  y1  1   x000D            x2  11  y2  11   x000D            stroke  black   x000D            stroke-width  2   gt  x000D   lt  svg gt  x000D   x000D   x000D

User · Answer

-- Simple HTML Solution --

Final result of easy to resize icon:

JSfiddle demo: https://jsfiddle.net/allenski/yr5gk3cm/

The simple HTML:

<a href="#" class="close" tabindex="0" role="button">close</a>

Note:

tabindex attribute is there to help accessibility focus of iOS touch devices.

role attribute is to let screen readers users know this is a button.

The word close is also intended for screen readers to mention.

The CSS code:

.close {
    position: absolute;
    top: 0;
    right: 0;
    display: block;
    width: 50px;
    height: 50px;
    font-size: 0;
}
.close:before, 
.close:after {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 5px;
    height: 20px;
    background-color: #F0F0F0;
    transform: rotate(45deg) translate(-50%, -50%);
    transform-origin: top left;
    content: '';
}
.close:after {
    transform: rotate(-45deg) translate(-50%, -50%);
}

To adjust thickness of close X icon, change the width property. Example for thinner icon:

.close:before, 
.close:after {
    width: 2px;
}

To adjust length of close X icon, change the height property. Example:

.close:before, 
.close:after {
    height: 33px;
}

User · Answer

True CSS with proper semantic and accessibility settings  It is a  lt button gt   It has text for screen readers  https   codepen io specialweb pen ExyWPYv editors 1100  x000D   x000D  button     width  2rem    height  2rem    padding  0    position  absolute    top  1rem    right  1rem    cursor  pointer      sr-only     position  absolute    width  1px    height  1px    padding  0    margin  -1px    overflow  hidden    clip  rect 0 0 0 0     border  0     button  before  button  after       content          width  1px      height  100       background   333      display  block      transform  rotate 45deg  translateX 0px       position  absolute      left  50       top  0     button  after       transform  rotate -45deg  translateX 0px          demo    body     background  black     pane     margin  0 auto    width  50vw    min-height  50vh    background   FFF    position  relative    border-radius  5px    x000D   lt div class  pane  gt     lt button type  button  gt  lt span class  sr-only  gt Close lt  span gt  lt  button gt   lt  div gt  x000D   x000D   x000D

User · Answer

As a pure CSS solution for the close or  times  symbol you can use the ISO code with the content property  I often use this for  after or  before pseudo selectors   The content code is  00d7   Example  div after    display  inline-block    content    00d7      This will render the  X         You can then style and position the pseudo selector in any way you want  Hope this helps someone

User · Answer

Try This Cross In CSS     x000D   x000D   close   x000D    position  absolute  x000D    right  32px  x000D    top  32px  x000D    width  32px  x000D    height  32px  x000D    opacity  0 3  x000D    x000D   close hover   x000D    opacity  1  x000D    x000D   close before   close after   x000D    position  absolute  x000D    left  15px  x000D    content       x000D    height  33px  x000D    width  2px  x000D    background-color   333  x000D    x000D   close before   x000D    transform  rotate 45deg   x000D    x000D   close after   x000D    transform  rotate -45deg   x000D    x000D   lt a href     class  close  gt  x000D   x000D   x000D

[css] X close button only using css

The answer is

-- Simple HTML Solution --

Examples related to css

Examples related to button

Tags