Follow

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use
Contact

How to add two lines in the center of a button

There is a button with a border: 3px solid #E82929; what technology can be used to add additional lines like in the photo?

enter image description here

.btn {
  position: relative;
  width: 362px;
  height: 71px;
  color: #FFFFFF;
  background-color: #000000;
  border: 3px solid #E82929;
  font-family: 'Flamenco';
  font-style: normal;
  font-weight: 400;
  font-size: 24px;
  line-height: 25px;
  text-align: center;
}
<button class="btn">Забронировать столик</button>

MEDevel.com: Open-source for Healthcare and Education

Collecting and validating open-source software for healthcare, education, enterprise, development, medical imaging, medical records, and digital pathology.

Visit Medevel

>Solution :

Use gradient

.btn {
  position: relative;
  padding: 20px 50px;
  color: #FFFFFF;
  border: 3px solid #E82929;
  font-family: 'Flamenco';
  font-style: normal;
  font-weight: 400;
  font-size: 24px;
  line-height: 25px;
  text-align: center;
  
  background: linear-gradient(90deg, #E82929 40px,#0000 0 calc(100% - 40px), #E82929 0) 50%/100% 3px no-repeat;
  background-color: #000000;
}
<button class="btn">Забронировать столик</button>
Add a comment

Leave a Reply

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use

Discover more from Dev solutions

Subscribe now to keep reading and get access to the full archive.

Continue reading