css按钮边框样式为菱形 |link无效导入css样式

button {
border: none;
width: 100px;
height: 100px;
background: #F08080;
position: relative;
transition: all 0.5s;
}
button:before {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
width: 0;
height: 0;
border-top: 50px solid transparent;
border-bottom: 50px solid transparent;
border-left: 50px solid #F08080;
z-index: -1;
transition: all 0.5s;
}
button:hover {
background: #A0522D;
}
button:hover:before {
border-right: 50px solid #A0522D;
}

上面的代码块实现了将按钮的边框样式改为菱形的效果，其中使用了:before伪元素。

首先，大家将按钮的border属性设为none，让按钮没有默认的边框样式。接着，大家将按钮的尺寸设为100px * 100px，并设置背景颜色。同时，设置按钮的位置为相对(position: relative)。

接下来，大家利用:before伪元素来创建按钮的边框样式。在:before中，大家使用绝对定位将伪元素的位置置于按钮内部。然后，通过border属性来创建菱形的样式，其中上下边框均为0，左边框为50px，颜色和按钮的背景颜色一致。

最后，大家使用transition属性来实现按钮和边框颜色的渐变效果。当鼠标悬浮在按钮上时，用:hover来改变按钮的背景颜色。同时，在:hover:before中，大家增加border-right属性，使得按钮的右侧边框颜色也改变，实现了整个菱形框格的变化效果。

经过这样一番设置，大家的按钮样式就从普通的圆角矩形变成了别具一格的菱形样式。