Удлиненная шестигранная кнопка для Bootstrap 4 - PullRequest
Новая
       10

Удлиненная шестигранная кнопка для Bootstrap 4

0 голосов
/ 14 апреля 2020

Как сделать Bootstrap 4 кнопки с гексагональной левой и правой сторонами, похожие на изображение ниже?

enter image description here

Вот ответы на аналогичные вопрос, но копирование этих стилей в Bootstrap 4 (с соответствующими классами .btn) не работает должным образом: Удлиненная кнопка в форме шестиугольника с использованием только одного элемента

1 Ответ

1 голос
/ 14 апреля 2020

Как сказано в комментарии @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>
...