Bootstrap 4 的细长六边形按钮

Question

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

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

Answer 1

请首先理解代码并根据您的需要更改代码。body {&nbsp; &nbsp; /* JUST FOR STYLING */&nbsp; &nbsp; background-color: #3c93af !important;}.custom_btn {&nbsp; &nbsp; position: relative;&nbsp; &nbsp; display: block;&nbsp; &nbsp; background: transparent;&nbsp; &nbsp; width: 300px;&nbsp; &nbsp; height: 80px;&nbsp; &nbsp; line-height: 80px;&nbsp; &nbsp; text-align: center;&nbsp; &nbsp; font-size: 20px;&nbsp; &nbsp; text-decoration: none;&nbsp; &nbsp; color: #ffdc01;&nbsp; &nbsp; margin: 40px auto;&nbsp; &nbsp; font-family: Helvetica, Arial, sans-serif;&nbsp; &nbsp; box-sizing: border-box;}.custom_btn:hover {&nbsp; &nbsp; text-decoration: none;}.custom_btn:before,.custom_btn:after {&nbsp; &nbsp; position: absolute;&nbsp; &nbsp; content: '';&nbsp; &nbsp; width: 300px;&nbsp; &nbsp; left: 0px;&nbsp; &nbsp; height: 34px;&nbsp; &nbsp; z-index: -1;&nbsp; &nbsp; box-sizing: content-box;}.custom_btn:before {&nbsp; &nbsp; transform: perspective(15px) rotateX(3deg);}.custom_btn:after {&nbsp; &nbsp; top: 40px;&nbsp; &nbsp; transform: perspective(15px) rotateX(-3deg);}.custom_btn.custom_btn--border:before,.custom_btn.custom_btn--border:after {&nbsp; &nbsp; border: 4px solid #ffdc01;}.custom_btn.custom_btn--border:before {&nbsp; &nbsp; border-bottom: none;}.custom_btn.custom_btn--border:after {&nbsp; &nbsp; border-top: none;}.custom_btn.custom_btn--border:hover:before,.custom_btn.custom_btn--border:hover:after {&nbsp; &nbsp; background: #ffdc01;}.custom_btn.custom_btn--border:hover {&nbsp; &nbsp; 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>