Bootstrap 4 的细长六边形按钮

Question

如何制作带有六边形左侧和左侧的 Bootstrap 4 按钮右侧，类似于下图？以下是类似问题的答案，但在 Bootstrap 4 中复制这些样式（使用正确的 .btn 类）无法正常工作： 仅使用一个元素的细长六边形按钮

Answer 1

请首先理解代码并根据您的需要更改代码。

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>