如何创建具有自定义（不同）高度和宽度边框的按钮 - CSS

Question

我想创建一个100px和100px高度的按钮，边框宽度为90px，高度为120px。但是，当我试图说它时会产生一种奇怪的行为。 那可能吗？

这是我想要完成的风格的图像：

Answer 1

您可以创建button并添加:after伪元素以创建边框。

＆＃13;

＆＃13;

$('button').click(function() {
  alert('Works')
})

＆＃13;

body {
  background: gray;
}
button {
  padding: 10px 30px;
  background: #F26522;
  font-size: 30px;
  color: white;
  position: relative;
  border: none;
  margin: 50px;
}
button:after {
  content: '';
  position: absolute;
  height: calc(100% + 10px);
  width: calc(100% - 20px);
  top: 0;
  left: 0;
  transform: translate(6px, -9px);
  border: 4px dotted white;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>BUTTON</button>

＆＃13;

＆＃13;

＆＃13;

Answer 2

这可以使用div和:after之类的伪元素作为边框部分。

body {
  background-color: black;
}

div {
  width: 130px;
  height: 50px;
  text-align: center;
  line-height: 50px;
  background-color: #ff4f00;
  color: #fff;
  position: relative;
  margin-top: 20px;
}

div:after {
  position: absolute;
  content: "";
  width: 110px;
  left: 10px;
  top: -11px;
  height: 70px;
  border: 2px dotted #fff;
}

<div>
  CONOCENOS
</div>