Bootstrap 4 的细长六角形按钮

Question

如何制作Bootstrap 4 个左右六边形的按钮，类似于下图？

这里是一个类似问题的答案，但在 Bootstrap 4 中复制这些样式（使用适当的 .btn 类）无法正常工作： Elongated hexagon shaped button using only one element

Answer 1

正如@chriskirknielsen 在评论中所说，请先理解代码，然后根据需要更改代码。

body {
    /* JUST FOR STYLING */
    background-color: #3c93af !important;
}

.custom_btn {
    position: relative;
    display: block;
    background: transparent;
    width: 300px;
    height: 80px;
    line-height: 80px;
    text-align: center;
    font-size: 20px;
    text-decoration: none;
    color: #ffdc01;
    margin: 40px auto;
    font-family: Helvetica, Arial, sans-serif;
    box-sizing: border-box;
}

.custom_btn:hover {
    text-decoration: none;
}

.custom_btn:before,
.custom_btn:after {
    position: absolute;
    content: '';
    width: 300px;
    left: 0px;
    height: 34px;
    z-index: -1;
    box-sizing: content-box;
}

.custom_btn:before {
    transform: perspective(15px) rotateX(3deg);
}

.custom_btn:after {
    top: 40px;
    transform: perspective(15px) rotateX(-3deg);
}

.custom_btn.custom_btn--border:before,
.custom_btn.custom_btn--border:after {
    border: 4px solid #ffdc01;
}

.custom_btn.custom_btn--border:before {
    border-bottom: none;
}

.custom_btn.custom_btn--border:after {
    border-top: none;
}

.custom_btn.custom_btn--border:hover:before,
.custom_btn.custom_btn--border:hover:after {
    background: #ffdc01;
}

.custom_btn.custom_btn--border:hover {
    color: #fff;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">

<a href="#" class="custom_btn custom_btn--border">Click me!</a>

Bootstrap 4 的细长六角形按钮

Elongated hexagon shaped button for Bootstrap 4

html

css

twitter-bootstrap

bootstrap-4

css-shapes