HTML CSS Button - html

Question

I want to create the following button until tomorrow
I managed to create this with only css and html
and here is my code.
.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>
I cant make it work with the line change

Answer 1

I know this snippet doesn't have the same dimensions as yours but I think it should help you out.
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>

Answer 2

The main idea to do this with flex. I did small refactoring.
.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>

Answer 3

.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;
}
<div class="pill-button">
<span class="save">Save The Date</span>
<div class="date">
Σάββατο 19/9/2020<br>
16:30-17:30
</div>
<span class="right"></span>
</div>