Popup form to have close x

Question

I am looking for a much cleaner popup close x. I see many all of the time that has the x wrapped in a circle outside of the form and I love how that looks. I have put the letter x in place of where I have close, but that looks just as bad, if not worse. How can I change my popup form to add in a clean x to be able to close it.

I created a fiddle to show what I have.. https://jsfiddle.net/x9xcbmtr/

Here is the current style for my close button.

.close {
    float: right;
    margin-right: 2px;
    color: #909090;
    text-decoration: none;
}
.close:hover{
    color: #686868;
    text-decoration: underline;
}

Answer 1

How about using a font awesome icon? like this: https://jsfiddle.net/x9xcbmtr/1/

<div id="light" class="signInpopup">    <a class="close" href="javascript:void(0)"><i class="fa fa-times-circle-o"></i></a>

Other x's and close buttons/icons check out https://fortawesome.github.io/Font-Awesome/icons/

Answer 2

If you can remove overflow: auto from .signInpopup , you can have the close button outside the form.

Use this HTML, where ❌ is the Unicode character for a cross mark:

<a class="close" href="javascript:void(0)">&#10060;</a>

Then change your .close styles as follows:

.close {
  float: right;
  transform: translateX(100%);  //takes it outside the form
  border: 1px solid gray;
  border-radius: 50%;           //creates circle
  padding: 0.4em;
  background: black;
  color: white;
  text-decoration: none;
}

Fiddle