<button id='close'>close</button>
#close {
overflow: hidden;
position: relative;
border: none;
padding: 0;
width: 2em; height: 2em;
border-radius: 50%;
background: transparent;
color: #1da1f2;
font: inherit;
text-indent: 100%;
cursor: pointer;
&:focus {
outline: solid 0 transparent;
box-shadow: 0 0 0 2px #8ed0f9
}
&:hover {
background: rgba(29, 161, 142, .1)
}
&:before, &:after {
position: absolute;
top: 15%; left: calc(50% - .0625em);
width: .125em; height: 70%;
border-radius: .125em;
transform: rotate(45deg);
background: currentcolor;
content: ''
}
&:after { transform: rotate(-45deg); }
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.