css - 如何创建带有圆边的按钮?
问题描述
我需要像这样创建按钮
您可以在边的中心看到圆形边框。我试图在课后和课前做到这一点,但这很棘手。哪种溶液最干净?我也完成了开发可调整大小的按钮,如果这可以作为一个数字完成,没有绝对定位或类似的东西会更好
body {
background-color: #000;
display: flex;
justify-content: center;
align-items: center;
}
button {
text-transform: uppercase;
background-color: #F9EFCA;
border: none;
padding: 20px 100px;
cursor: pointer;
letter-spacing: 1px;
border-bottom: 10px solid #ae9e5c !important;
box-shadow: inset 0 -1px 1px 0 rgba(0, 0, 0, .12), 0 10px 20px -5px rgba(0, 0, 0, .25);
font-size: 50px;
transition: .2s all;
position: relative;
border-radius: 10px;
}
button:hover,
button:active {
transition: .2s all;
border-bottom: none !important;
}
button:before,
button:after {
content: '';
position: absolute;
top: 9%;
bottom: 0;
height: 91%;
background: #F9EFCA;
width: 10px;
border-radius: 100%;
}
button:before {
left: -4px;
}
button:after {
right: -4px;
}
button:active:before,
button:active:after,
button:hover:before,
button:hover:after {
top: 9%;
bottom: 0;
height: 82%;
}
<button>Call me</button>
解决方案
尝试使用按钮上的属性
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
这将帮助您定位按钮角,而不会扭曲按钮本身的形状。
推荐阅读
- r - 将 R 中数据框中的列中的“NA”值替换为同一数据框中另一列中的值
- java - RxJava + Kotlin - 在创建另一个时使用一个 observable
- google-app-engine - 如何为具有相同处理程序的多个 cron 作业设置 cron.yaml?
- android - android:marqueeRepeatLimit 完成时隐藏文本视图
- nunjucks - 在 Nunjucks 模板中获取当前 URL?
- c++ - C++:考虑但不调用构造函数的特殊性
- excel - PDF 到 Excel 数据库
- azure - 从 Azure 数据资源管理器下载后 XLSX 文件损坏
- ios - 更改 UIImagePickerController 中的取消按钮文本
- python - 如何从地图对象中获取二进制值(