Skip to content

Instantly share code, notes, and snippets.

@gdibble
Created March 10, 2022 23:54
Show Gist options
  • Save gdibble/58010585126e071e5eabbae89f445ff7 to your computer and use it in GitHub Desktop.
Save gdibble/58010585126e071e5eabbae89f445ff7 to your computer and use it in GitHub Desktop.
CSS x to check animation
/** CloseConfirm.module.scss - Animated x → ✓
* @see https://codepen.io/gdibble/pen/LYePYXL
* @example <button className={styles.CloseConfirm} type="button" onClick={someFn}><div className="check"> </div></button>
*/
$SkyBlue100: #08b2e3;
.CloseConfirm {
position: absolute;
top: 0.25em;
right: 0.25em;
background-color: transparent;
border: 0 none;
box-sizing: border-box;
font-size: 1.2em;
cursor: pointer;
div {
position: relative;
width: 1.3em;
height: 1.3em;
// Animated x → ✓ - an inverse of https://codepen.io/ekeric13/pen/oYoXbK
// Start as x
&::before {
width: 1.2em;
height: 0.2em;
top: 0.6em;
left: 0.25em;
transform: rotate(-45deg);
position: absolute;
background: #fff;
border-radius: 3px;
content: '';
transition: transform 0.5s ease-in-out, background 0.5s ease-in-out;
}
&::after {
width: 1.2em;
height: 0.2em;
top: 0.6em;
left: 0.25em;
transform: rotate(45deg);
position: absolute;
background: #fff;
border-radius: 3px;
content: '';
transition: transform 0.5s ease-in-out, width 0.5s ease-in-out, top 0.5s ease-in-out,
left 0.5s ease-in-out, background 0.5s ease-in-out;
}
// Hover as ✓
&:hover::before {
transform: rotate(-55deg);
background: $SkyBlue100;
}
&:hover::after {
width: 0.7em;
height: 0.2em;
top: 0.85em;
left: 0;
transform: rotate(45deg);
background: $SkyBlue100;
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment