नीचे की छवि के समान, हेक्सागोनल बाएँ और दाएँ पक्षों के साथ बूटस्ट्रैप 4 बटन कैसे बनाएं?

enter image description here

यहां एक समान प्रश्न के उत्तर दिए गए हैं, लेकिन बूटस्ट्रैप 4 (उचित .btn कक्षाओं के साथ) में उन शैलियों की प्रतिलिपि बनाना ठीक से काम नहीं करता है: केवल एक तत्व का उपयोग करते हुए लंबे षट्भुज के आकार का बटन

-1
Marius 14 अप्रैल 2020, 21:41

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>
1
Nisharg Shah 14 अप्रैल 2020, 19:14