我需要像这样创建按钮
您可以在边中心上看到圆形的边框。我试图在课后和课前这样做,但这很棘手。哪种解决方案最干净?另外,我已经完成了dev resizeble按钮的设计,如果可以将其作为一个图形来完成,而没有这样的绝对定位或污点,那就更好了
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>
答案 0 :(得分:0)
尝试使用按钮上的属性
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
这将帮助您定位按钮角点而不会扭曲按钮本身的形状。
答案 1 :(得分:0)
创建一个新的按钮类,然后在CSS中进行尝试:
.button_costum
{
margin: 10px auto;
font-size: 2.0rem;
padding: 1.25rem 2.5rem;
display: block;
background-color: // choose what you want
border: 1px solid transparent;
color: // choose what you want
font-weight: 300;
-webkit-border-radius: 3px;
border-radius: 20px; // in your case it shout be 25 or 30
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}