html - 以前如何设置按钮的左右边框?
问题描述
如何仅使用一个:before 或 :after 设置按钮的左右边框,按钮左侧和右侧有 20px 的空间,我试图设置边框的内容请参见设计的附件 - 我想要的。请通过我的屏幕截图帮助我。提前致谢。
.btn-action {
display: block;
text-align: center;
max-width: 800px;
margin: 0 auto;
background-color: gray;
height: 400px;
-webkit-box-orient: vertical!important;
-webkit-box-direction: normal!important;
-ms-flex-direction: column!important;
flex-direction: column!important;
display: -webkit-box!important;
display: -ms-flexbox!important;
display: flex!important;
-webkit-box-pack: center!important;
-ms-flex-pack: center!important;
justify-content: center!important;
-webkit-box-align: center!important;
-ms-flex-align: center!important;
align-items: center!important;
}
.btn {
display: inline-block;
font-size: 18px;
line-height: 24px;
color: #fff;
padding: 12px 32px;
border: 2px solid #C3A165;
text-transform: uppercase;
font-weight: 500;
background-color: transparent;
border-radius: 0;
text-decoration: none;
transition: 0.3s all;
-webkit-transition: 0.3s all;
-moz-transition: 0.3s all;
-ms-transition: 0.3s all;
}
.btn:hover {
background-color: #C3A165;
color: #fff;
border-color: #C3A165;
}
.btn:before {
content: '';
height: 1px;
background-color: #C3A165;
width: 100%;
position: absolute;
left: 0;
top: 25px;
}
.border {
position: relative;
width: 100%;
}
<section class="btn-action">
<div class="border">
<a href="#" class="btn primary">Get Started</a>
</div>
</section>
解决方案
由于只允许使用一个伪元素,因此可以使用box-shadow
来实现效果。但是,必须对位置值进行硬编码。
.btn-action {
display: block;
text-align: center;
max-width: 800px;
margin: 0 auto;
background-color: gray;
height: 400px;
-webkit-box-orient: vertical!important;
-webkit-box-direction: normal!important;
-ms-flex-direction: column!important;
flex-direction: column!important;
display: -webkit-box!important;
display: -ms-flexbox!important;
display: flex!important;
-webkit-box-pack: center!important;
-ms-flex-pack: center!important;
justify-content: center!important;
-webkit-box-align: center!important;
-ms-flex-align: center!important;
align-items: center!important;
overflow: hidden;
}
.btn {
display: inline-block;
font-size: 18px;
line-height: 24px;
color: #fff;
padding: 12px 32px;
border: 2px solid #C3A165;
text-transform: uppercase;
font-weight: 500;
background-color: transparent;
border-radius: 0;
text-decoration: none;
transition: 0.3s all;
-webkit-transition: 0.3s all;
-moz-transition: 0.3s all;
-ms-transition: 0.3s all;
}
.btn:hover {
background-color: #C3A165;
color: #fff;
border-color: #C3A165;
}
.btn:before {
content: '';
height: 1px;
background: linear-gradient(to right,#C3A165 30%,transparent 30% 70%,#C3A165 70% 100%);
width: 100%;
position: absolute;
left: 0px;
top: 25px;
}
.border {
position: relative;
width: 100%;
}
<section class="btn-action">
<div class="border">
<a href="#" class="btn primary">Get Started</a>
</div>
</section>
另一种方法是使用linear-gradient
.btn-action {
display: block;
text-align: center;
max-width: 800px;
margin: 0 auto;
background-color: gray;
height: 400px;
-webkit-box-orient: vertical!important;
-webkit-box-direction: normal!important;
-ms-flex-direction: column!important;
flex-direction: column!important;
display: -webkit-box!important;
display: -ms-flexbox!important;
display: flex!important;
-webkit-box-pack: center!important;
-ms-flex-pack: center!important;
justify-content: center!important;
-webkit-box-align: center!important;
-ms-flex-align: center!important;
align-items: center!important;
overflow: hidden;
}
.btn {
display: inline-block;
font-size: 18px;
line-height: 24px;
color: #fff;
padding: 12px 32px;
border: 2px solid #C3A165;
text-transform: uppercase;
font-weight: 500;
background-color: transparent;
border-radius: 0;
text-decoration: none;
transition: 0.3s all;
-webkit-transition: 0.3s all;
-moz-transition: 0.3s all;
-ms-transition: 0.3s all;
}
.btn:hover {
background-color: #C3A165;
color: #fff;
border-color: #C3A165;
}
.btn:before {
content: '';
height: 1px;
background: linear-gradient(to right,#C3A165 30%,transparent 30% 70%,#C3A165 70% 100%);
width: 100%;
position: absolute;
left: 0px;
top: 25px;
}
.border {
position: relative;
width: 100%;
}
<section class="btn-action">
<div class="border">
<a href="#" class="btn primary">Get Started</a>
</div>
</section>
推荐阅读
- c# - 使用实体框架时 ASP.NET Web 应用程序重新启动
- laravel - 有时|必需|电子邮件和有时|电子邮件验证规则之间的区别
- angular - Word 文档中未列出 Office.js API 样式
- c# - 如果我单击空白区域,C# DataGrid ContextMenuOpening 错误
- shell - 通过 shell 脚本调用 Snowsql 程序
- php - PHP 安全测试为 GetHTMLValueString 提供了严重的 Reflected XSS 警告,我该如何解决?
- css - 从同一个 SCSS 文件导入嵌套类
- javascript - 405 - Uncaught (in promise) 错误:请求失败,状态码为 405
- java - 是否可以在 Spring Boot 中全局管理错误?
- typescript - 找不到打字稿声明文件 .d.ts / 不是模块