如何解决HTML CSS按钮
我想在明天之前创建以下按钮
我设法只用CSS和HTML来创建
这是我的代码。
.date {
color: #7ed2f6;
font-size: 40px;
font-weight: bold;
}
.save {
color: white;
font-size: 40px;
font-weight: bold;
}
.pill-button {
border: 0.2em solid white;
color: white;
padding: 10px 20px;
text-align: center;
display: inline-block;
margin: 4px 2px;
cursor: pointer;
border-radius: 60px;
}
.right {
display: inline-block;
width: 4em;
height: 4em;
border: 0.3em solid white;
border-radius: 50%;
margin-left: 1.5em;
}
.right:after {
content: '';
display: inline-block;
margin-top: 1.05em;
margin-left: -0.6em;
width: 1.2em;
height: 1.2em;
border-top: 0.3em solid white;
border-right: 0.3em solid white;
-moz-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.greyline {
border-left: 2px solid #8d9ab1;
height: 81px;
display: inline-block;
}
<a href="#" class="pill-button">
<span class="save">Save The Date</span>
<div class="greyline"></div>
<span class="date">Σάββατο 19/9/2020 16:30-17:30</span>
<span class="right"></span>
</a>
我无法使其与换行符一起使用
解决方法
我知道此代码段的尺寸与您的代码不同,但我认为它可以为您提供帮助。
body {
background-image: linear-gradient(to right,#1b2e52,#243f73);
margin: 3em;
}
.pill-button {
background-color: transparent;
font-size: 1em;
border: 0.125em solid white;
color: white;
margin: 1em 0;
padding: 0.625em 4.375em 0.625em 1.25em;
display: inline-flex;
align-items: center;
cursor: pointer;
border-radius: 3.75em;
text-decoration: none;
font-family: sans-serif;
position: relative;
width: 33.125em;
box-sizing: border-box;
}
.pill-button::before {
content: "";
width: 2.5em;
height: 2.5em;
border: 0.125em solid white;
border-radius: 50%;
position: absolute;
right: 0.375em;
top: 50%;
transform: translateY(-50%);
}
.pill-button::after {
content: "";
display: inline-block;
width: 0.625em;
height: 0.625em;
border-top: 0.1875em solid white;
border-right: 0.1875em solid white;
position: absolute;
right: 1.5em;
top: 50%;
transform: translateY(-50%) rotate(45deg);
}
.pill-button__save {
color: white;
font-size: 1.875em;
font-weight: bold;
padding-right: 0.5em;
margin-right: 0.5em;
position: relative;
min-width: 7em;
}
.pill-button__save::after {
content: "";
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
width: 0.0333333333em;
height: 1.1666666667em;
background-color: #8d9ab1;
}
.pill-button__date {
color: #7ed2f6;
font-size: 1.25em;
font-weight: bold;
text-align: center;
}
.pill-button__time-range {
display: block;
}
<a href="#" class="pill-button">
<span class="pill-button__save">Save The Date</span>
<span class="pill-button__date">Σάββατο 19/9/2020 <span class="pill-button__time-range">16:30-17:30</span></span>
</a>
<button class="pill-button">
<span class="pill-button__save">Save The Date</span>
<span class="pill-button__date">Σάββατο 19/9/2020 <span class="pill-button__time-range">16:30-17:30</span></span>
</button>
,
使用flex进行此操作的主要思想。我做了小的重构。
.date{
color:#7ed2f6;
font-size:40px;
font-weight: bold;
}
.save{
color:white;
font-size:40px;
font-weight: bold;
}
.pill-button {
background-color: blue;
border: 0.2em solid white;
color: white;
padding: 10px 20px;
text-align: center;
/* Added */
display: flex;
align-items: center;
justify-content: space-between;
/* End Added */
margin: 4px 2px;
cursor: pointer;
border-radius: 60px;
}
.right {
/* display: inline-block; */
width: 4em;
height: 4em;
border: 0.3em solid white;
border-radius: 50%;
margin-left: 1.5em;
}
.right:after {
content: '';
display: inline-block;
margin-top: 1.05em;
margin-left: -0.6em;
width: 1.2em;
height: 1.2em;
border-top: 0.3em solid white;
border-right: 0.3em solid white;
-moz-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.greyline {
border-left: 2px solid #8d9ab1;
height: 81px;
/* display: inline-block; */
}
<a href="#" class="pill-button">
<span class="save">Save The Date</span>
<div class="greyline"></div>
<span class="date">Σάββατο 19/9/2020 16:30-17:30</span>
<span class="right"></span>
</a>
,
EXISTS
.date{
color:#7ed2f6;
font-size:40px;
font-weight: bold;
display: inline-block;
padding-left:15px;
margin-left:15px;
border-left: 2px solid #8d9ab1;
line-height:1;
}
.save{
color:white;
font-size:20px;
font-weight: bold;
vertical-align:middle;
}
.pill-button {
border: 0.2em solid white;
color: white;
padding: 10px 10px;
text-align: center;
display: flex;
width: max-content;
margin: 4px 2px;
cursor: pointer;
border-radius: 50px;
align-items: center;
background-color:#152b47;
}
.right {
display: inline-block;
width: 4em;
height: 4em;
border: 0.3em solid white;
border-radius: 50%;
margin-left: 1.5em;
}
.right:after {
content: '';
display: inline-block;
margin-top: 1.05em;
margin-left: -0.6em;
width: 1.2em;
height: 1.2em;
border-top: 0.3em solid white;
border-right: 0.3em solid white;
-moz-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.greyline {
border-left: 2px solid #8d9ab1;
height: 81px;
display: inline-block;
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。