Skip to content

Instantly share code, notes, and snippets.

@johnlewisdesign

johnlewisdesign/another-close-x-pure-css.html

Created August 4, 2020 01:20
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save johnlewisdesign/b96ffeb1e77d32a0588a20b7d6884f33 to your computer and use it in GitHub Desktop.
Save johnlewisdesign/b96ffeb1e77d32a0588a20b7d6884f33 to your computer and use it in GitHub Desktop.
Download ZIP
Creates a close button X in pure CSS
Raw
another-close-x-pure-css.html
<span class="close-x"></span>
<style>
.close-x {
display: inline-block;
width: 20px;
height: 20px;
border: 7px solid #f56b00;
background:
linear-gradient(45deg, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 43%,#fff 45%,#fff 55%,rgba(0,0,0,0) 57%,rgba(0,0,0,0) 100%),
linear-gradient(135deg, #f56b00 0%,#f56b00 43%,#fff 45%,#fff 55%,#f56b00 57%,#f56b00 100%);
}
</style>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment