Html 如何获得此按钮布局？

我正试图得到这个布局

---

您应该这样做，但不应使用您自己的颜色和尺寸

.btn{
显示：内联块；
边框：1px纯黑；
位置：相对位置；
填充：10px 20px；
利润率：20px；
颜色：#fff；
}
.btn:之前{
背景颜色：蓝色；
边框颜色：绿色；
边框样式：实心；
边框宽度：10px 5px 10px；
z指数：-1；
位置：绝对位置；
身高：100%；
宽度：100%；
顶部：-5px；
左：-5px；
内容：“；
}

---

阅读更多

作为可能的解决方案

*{
框大小：边框框；
}
身体{
边缘：2米；
}
.btn{
背景色：深蓝色；
颜色：白色；
边框：.2米纯白；
高度：2.5em；
宽度：7em；
位置：相对位置；
光标：指针；
}
.btn:之前{
内容：“；
宽度：9em；
高度：4em；
背景颜色：浅蓝色；
位置：绝对位置；
顶部：-1米；
左：-1米；
z指数：-1；
}
.btn:之后{
内容：“；
位置：绝对位置；
背景色：透明；
边框：薄而实的黑色；
高度：2米；
宽度：6.5em；
顶部：-.5em；
左：-.5em；
}

---

单击我

有很多方法可以做到这一点，但简单的方法是使用

伪元素

。查看代码片段

@导入url（“https://fonts.googleapis.com/css?family=Roboto");
.btn{
边界半径：0px；
字体大小：1.125rem；
文本阴影：无；
盒影：无；
显示：块；
宽度：计算（100%-25px）；
文字装饰：无；
字体系列：“Roboto”，无衬线；
文本对齐：居中；
}
.btn.fountain-blue{
背景色：#65becf；
颜色：#fff；
左边距：5px；
边缘顶部：5px；
填充顶部：10px；
垫底：15px；
左侧填充：15px；
右侧填充：15px；
位置：相对位置；
}
.btn边界{
显示：内联块；
高度：40px；
z指数：9999；
位置：绝对位置；
左：50%；
最高：50%；
-webkit转换：翻译（-50%，-50%）；
转换：翻译（-50%，-50%）；
}
.btn边界：之后{
内容：''；
边框：2倍实心#000；
位置：绝对位置；
宽度：100%；
身高：100%；
左：0；
排名：0；
}