My latest challenge involves creating a close button using CSS to close a tag. I combined techniques from an article on Patterns for Closebuttons, along with a css-only tutorial for crafting an X from this Close Button using CSS.
However, I've run into an issue: I can't seem to get the X perfectly centered. When I adjust the placement to 50% of the width of the lines, it looks better, leading me to suspect that it has something to do with the line widths.
I'm reaching out here in hopes that someone can shed light on this for me.
'HTML
<button type="button" aria-label="Close">
<span aria-hidden="true" class="close"></span>
</button>
'CSS
button {
display: flex;
justify-content: center;
align-items: center;
font-weight: 700;
padding: 0px;
background-color: rgb(192,192,192);
border: none;
color: white;
text-decoration: none;
height: 150px;
width: 150px;
border-radius: 50%;
}
button:hover {
background-color: rgb(146, 146, 146);
cursor: pointer;
}
.close {
position: relative;
/* right: 10px; */
width: 60%;
height: 60%;
}
.close:before, .close:after {
position: absolute;
content: ' ';
height: 100%;
width: 20px;
background-color: rgb(255, 255, 255);
}
.close:before {
transform: rotate(45deg);
}
.close:after {
transform: rotate(-45deg);
}
To make things easier, I created a codepen: Codepen link