如何修改默认方形input按钮样式，使其呈现三个垂直点的效果？

你只需要先重置按钮的原生默认样式，再把原div的样式适配到input按钮上即可，具体实现代码如下：

<!-- 原有HTML代码无需修改，也可自定义类名方便选择 -->
<input type="button" class="vertical-dot-btn">

/* 按钮样式 */
.vertical-dot-btn {
  /* 核心：清除浏览器默认按钮样式 */
  appearance: none;
  border: none;
  outline: none;
  padding: 0;
  cursor: pointer;

  /* 复用你提供的div样式 */
  position: relative;
  background: #3F3C53;
  width: 50px;
  height: 50px;
  color: white;
  border-radius: 50%;
  box-shadow: 0px 0px 15px 1px #4185BC;
  margin: 50px;
}
/* 按钮伪元素实现三个垂直点 */
.vertical-dot-btn::after {
  content: '•••';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(90deg);
  font-size: 15px; 
  letter-spacing: 4px;
  margin-top: 2px;
}

• appearance: none是清除默认方形外观的核心属性，可兼容绝大多数现代浏览器
• 不要给按钮设置overflow: hidden，否则伪元素的内容可能会被裁剪

内容的提问来源于stack exchange，提问作者White Owl