如何制作帶有六邊形左側(cè)和左側(cè)的 Bootstrap 4 按鈕右側(cè)，類似于下圖？以下是類似問題的答案，但在 Bootstrap 4 中復(fù)制這些樣式（使用正確的 .btn 類）無法正常工作： 僅使用一個元素的細(xì)長六邊形按鈕
1 回答
慕村9548890
TA貢獻(xiàn)1884條經(jīng)驗 獲得超4個贊
請首先理解代碼并根據(jù)您的需要更改代碼。
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 回答
- 0 關(guān)注
- 171 瀏覽
添加回答
舉報
0/150
提交
取消