Pure css close button

Question

JSFiddle  Is there any way to make something like the X on that link with pure css

User · Answer

My attempt at a close icon  no text   x000D   x000D   close-icon x000D    x000D    display block  x000D    box-sizing border-box  x000D    width 20px  x000D    height 20px  x000D    border-width 3px  x000D    border-style  solid  x000D    border-color red  x000D    border-radius 100   x000D    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    x000D    background-color red  x000D    box-shadow 0px 0px 5px 2px rgba 0 0 0 0 5   x000D    transition  all 0 3s ease  x000D    x000D   lt a href     class  close-icon  gt  lt  a gt  x000D   x000D   x000D

User · Answer

You can create close  or any  button on http   www cssbuttongenerator com   It gives you pure css value of button   HTML     lt span class  classname hightlightTxt  gt x lt  span gt    CSS     lt style type  text css  gt   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    lt  style gt     This button was generated using CSSButtonGenerator com

User · Answer

The disappointing thing here is that the  X  isn t transparent  which is how I would likely create a PNG  at least    I put together this quick test   http   jsfiddle net UM3a2 22 embedded result  which allows you to color the positive space while leaving the negative space transparent  Since it is made entirely of borders it is easy to color since border-color defaults to the text color   It doesn t fully support I E  8 and earlier  border-radius issues   but it degrades to a square fairly nicely  if you re okay with a square close button    It also requires two HTML elements since you are only allowed two pseudo elements per selector  I don t know exactly where I learned this  but I think it was in an article by Chris Coyier     lt div id  close  class  arrow-t-b  gt    Close    lt div class  arrow-l-r  gt   lt  div gt   lt  div gt    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

User · Answer

I Think It Is Best   And Use The Simple JS to make this work    lt script gt  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     lt  script gt   lt style type  text css  gt               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                     lt  style gt   lt button onclick  privacypolicy    gt Show Content lt  button gt   lt div id  privacypolicy  class  orthi-textlightbox-background  style  display none   gt   lt div class  orthi-textlightbox-area  gt  LOL lt button class  orthi-textlightbox-area-close  onclick  hideprivacypolicy    gt    lt  button gt   lt  div gt   lt  div gt

User · Answer

Basic idea  For the a boxclose   border-radius  40px  width 20px  height 10px  background-color   c0c0c0  border  1px solid black  color  white  padding-left  10px  padding-top  4px    Adding a  X  to the content of the close box   http   jsfiddle net adzFe 1   Quick and dirty  but works

User · Answer

I become frustrated trying to implement something that looked consistent in all browsers and went with an svg button which can be styled with css   html   lt svg gt       lt circle cx  12  cy  12  r  11  stroke  black  stroke-width  2  fill  white    gt       lt path stroke  black  stroke-width  4  fill  none  d  M6 25 6 25 17 75 17 75    gt       lt path stroke  black  stroke-width  4  fill  none  d  M6 25 17 75 17 75 6 25    gt   lt  svg gt    css  svg       cursor  pointer      height  24px      width  24px    svg  gt  circle       stroke  black      fill  white    svg  gt  path       stroke  black    svg hover  gt  circle       fill  red    svg hover  gt  path       stroke  white      http   jsfiddle net purves 5exav2m7

User · Answer

Just a thought - if you re not targeting IE7  you could get away with any image being base64-encoded and embedded into css  I m assuming your goal is to avoid an unnecessary http request rather than  to actually make a css button as its own goal

User · Answer

I spent more time on this than I should have  and haven t tested in IE for obvious reasons  That being said  it s pretty much identical   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

User · Answer

Hi you can used this code in pure css   as like this   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   lt a href     class  arrow  gt    lt  a gt      Live demo http   jsfiddle net rohitazad VzZhU

User · Answer

If you want pure css  without the letter  x       Here are some awesome experimental icons that include an  x  in a circle that is made with CSS  http   nicolasgallagher com pure-css-gui-icons demo

User · Answer

Edit  Updated css to match with what you have    DEMO  HTML   lt div gt       lt span class  close-btn  gt  lt a href     gt X lt  a gt  lt  span gt   lt  div gt    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

[javascript] Pure css close button

Examples related to javascript

Examples related to jquery

Examples related to css

Examples related to overlay