Skip to content

Instantly share code, notes, and snippets.

@maneja81
Created December 26, 2019 08:21
Show Gist options
  • Save maneja81/ecc4e4521f13d7f893e99c16ed783764 to your computer and use it in GitHub Desktop.
Save maneja81/ecc4e4521f13d7f893e99c16ed783764 to your computer and use it in GitHub Desktop.
Close button in pure css
.close-button {
position: absolute;
top: 0;
right: 0;
width: 48px;
height: 48px;
background: #41415B;
border-radius: 48px;
margin-top: -24px;
&:before {
background-color: #FFFFFF;
content: "";
display: block;
left: 50%;
position: absolute;
top: 50%;
width: 1px;
height: 16px;
-webkit-transform: translateX(-50%) translateY(-50%) rotate(45deg);
transform: translateX(-50%) translateY(-50%) rotate(45deg);
-webkit-transform-origin: center center;
transform-origin: center center;
}
&:after {
background-color: #FFFFFF;
content: "";
display: block;
left: 50%;
position: absolute;
top: 50%;
width: 16px;
height: 1px;
-webkit-transform: translateX(-50%) translateY(-50%) rotate(45deg);
transform: translateX(-50%) translateY(-50%) rotate(45deg);
-webkit-transform-origin: center center;
transform-origin: center center;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment