How to change the default look of an input button (square) to make it look like three vertical dots?-CodePudding

I have this

<input type="button">

and i want to make the button look like the code you get from this:

  div {
      position: relative;
      background: #3F3C53;
      width: 50px;
      height: 50px;
      color: white;
      border-radius: 50%;
      box-shadow: 0px 0px 15px 1px #4185BC;
      margin: 50px;
    }
    div:after {
      content: '•••';
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%) rotate(90deg);
      font-size: 15px; 
      letter-spacing: 4px;
      margin-top: 2px;
}

How do I remove the default look of a box and change it to three vertical dots?

CodePudding user response：

The given code styles a div by adding a pseudo element which has the three dots as content and it is able to style them (rotating) without the actual div being rotated.

It is not 'legal' CSS to have a pseudo element on an input element (though some browsers may allow it) so this snippet wraps the input in a div which has the styling and makes the actual input element have opacity 0 so it is still clickable but can't be seen.

Note the after pseudo element has been changed to a before pseudo element so that it does not overwrite the input element.

div {
  position: absolute;
  width: 50px;
  height: 50px;
  background: #3F3C53;
  color: white;
  border-radius: 50%;
  box-shadow: 0px 0px 15px 1px #4185BC;
  margin: 50px;
}

div::before {
  content: '•••';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(90deg);
  font-size: 15px;
  letter-spacing: 4px;
  margin-top: 2px;
  background: #3F3C53;
}

input {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  opacity: 0;
}

<div><input type="button" onclick="alert('I have been clicked');"></div>