Bootstrap 4 的细长六角形按钮
Elongated hexagon shaped button for Bootstrap 4
如何制作Bootstrap 4 个左右六边形的按钮,类似于下图?
这里是一个类似问题的答案,但在 Bootstrap 4 中复制这些样式(使用适当的 .btn 类)无法正常工作:
Elongated hexagon shaped button using only one element
正如@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>
如何制作Bootstrap 4 个左右六边形的按钮,类似于下图?
这里是一个类似问题的答案,但在 Bootstrap 4 中复制这些样式(使用适当的 .btn 类)无法正常工作: Elongated hexagon shaped button using only one element
正如@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>