仅用于角落边框的 CSS

Question

我需要关于如何使按钮看起来像这样的想法：

我不知道如何制作这样的方角，我在网上找不到任何解决方案。此外，在悬停时，边框应该围绕按钮（只是一个普通的 2px 边框。）

Answer 1

这是一个使用绝对定位伪元素的纯 CSS 解决方案，这意味着您不必创建任何图像。这个方法实际上是在按钮内创建四个元素。这些元素位于四个角中的每一个角，并在两侧指定边框。

非花哨，没有过渡：（在悬停时给按钮一个边框）

body {
    background-color: black;
}

button {
    position: relative;
    width: 100px;
    height: 100px;
    margin: 20px;
    background: none;
    border: none;
    cursor: pointer;
    color: white;
    padding: 0;
    box-sizing: content-box;
    border: 2px solid transparent;
}

button::before, button::after, span::before, span::after {
    display: block;
    content: "";
    width: 20px;
    height: 20px;
    position: absolute;
}

button::before {
    top: -2px;
    left: -2px;
    border-top: 2px solid white;
    border-left: 2px solid white;
}
button::after {
    top: -2px;
    right: -2px;
    border-top: 2px solid white;
    border-right: 2px solid white;
}
span::before {
    bottom: -2px;
    left: -2px;
    border-bottom: 2px solid white;
    border-left: 2px solid white;
}
span::after {
    bottom: -2px;
    right: -2px;
    border-bottom: 2px solid white;
    border-right: 2px solid white;
}

button:hover {
  border: 2px solid white;
}

<button><span>BUTTON</span></button>

花式，带过渡：（为我们的伪元素设置动画以占据按钮的整个高度/宽度）

body {
    background-color: black;
}

button {
    position: relative;
    width: 100px;
    height: 100px;
    margin: 20px;
    background: none;
    border: none;
    cursor: pointer;
    color: white;
    padding: 0;
    box-sizing: content-box;
    border: 2px solid transparent;
}

button::before, button::after, span::before, span::after {
    display: block;
    content: "";
    width: 20px;
    height: 20px;
    position: absolute;
}

button::before {
    top: -2px;
    left: -2px;
    border-top: 2px solid white;
    border-left: 2px solid white;
    transition: 0.5s all;
}
button::after {
    top: -2px;
    right: -2px;
    border-top: 2px solid white;
    border-right: 2px solid white;
    transition: 0.5s all;
}
span::before {
    bottom: -2px;
    left: -2px;
    border-bottom: 2px solid white;
    border-left: 2px solid white;
    transition: 0.5s all;
}
span::after {
    bottom: -2px;
    right: -2px;
    border-bottom: 2px solid white;
    border-right: 2px solid white;
    transition: 0.5s all;
}

button:hover::before, button:hover::after {
    width: 50px;
    height: 50px;
}

button:hover span::before, button:hover span::after {
    width: 50px;
    height: 50px;
}

<button><span>BUTTON</span></button>