0

I want to create the following button until tomorrow

desired design

I managed to create this with only css and html

own html and css

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

Improve this question
4
  • The problem is to make this button in my html Commented Sep 8, 2020 at 14:36
  • You need two additional spans inside the date span. Commented Sep 8, 2020 at 14:36
  • What spans? Can you please tell me? Commented Sep 8, 2020 at 14:42
  • Does @Gena Answer resolves your issue? Commented Sep 8, 2020 at 15:00

3 Answers 3

Reset to default
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>

Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

Hi, why isnt the a centered bt the button is? I need a center a
0

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>

Improve this answer

4 Comments

Please, Run code snippet and see how button look, then switch to Full page view and You'll realize that Your solution doesn't resolve the problem.
What is the problem ? Describe and I will help
I left small fix, if you about content alignment
OP provide 2 pictures, 1st - desired button look and 2nd what he "get". When I Run code snippet Your button isn't what OP want, when I switch to Full page button isn't what OP want, again. If I understanf well, Save The Date must be in one line, and date and time need to be "divided" by new line. Or maybe I doesn't understand question well. I think he need to "play" little bit with fixed width of button, maybe.
0 

.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>

Improve this answer

5 Comments

First of all thank you very much for your answer.I Think it works fine but I wanted the font size bigger so I made them 40 px but now the distance between the 2 lines Σαββατο 19/9/2020 and 16:30-17:30 is to big.How can I make the hight distance smaller?
@Stefanie I found a free webfont to match your original picture font if that can help you : webfonts.ffonts.net/Khand-Black.font.download Do you know how to use a custom webfont?
@Stefanie I have edited the answer to use the CSS line-height property. Adjust the line-height as needed. LaurentC has suggested a font. Do note that line-height varies with font. You may want to decide on the font and then adjust line-height as needed
Thanks again I dont know how to use web fonts but I have a question.Should this font size be adjusted when the screen gets smaller so it always matches the picture and the lines never break?
That depends. I have a feeling you will have to adjust the font-size on mobile device. You can test it and see

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.