0
195
ViewsCómo agregar dos líneas en el centro de un botón
Hay un botón con un borde: 3px sólido #E82929; ¿Qué tecnología se puede usar para agregar líneas adicionales como en la foto?
.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>
·
Santiago Trujillo
2 answers
Answer question0
Usar degradado
.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>
·
Santiago Trujillo
Report
0
No necesita marcado adicional, porque se puede hacer con los pseudo elementos::before y ::after .
Suponiendo que sus 2 líneas a la izquierda y a la derecha deben tener un ancho de 30px y un relleno izquierdo y derecho de 10px , podría agregar esto a su CSS ya existente:
.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; } /* extra code comes here */ .btn { padding: 0 40px; /* 30px line width + 10px padding */ } .btn::before, .btn::after { background-color: #E82929; /* border color */ content: ''; /* content is mandatory for the element to show up */ height: 3px; /* 3px border width */ position: absolute; top: 50%; /* 50% from the top */ transform: translateY(-50%); /* half of its height back to the top */ width: 30px; /* 30px line width */ } .btn::before { left: 0; } .btn::after { right: 0; } <button class="btn">Забронировать столик</button>Cambia el ancho y el acolchado según tus necesidades.
Qué hace: agrega los pseudoelementos::before y ::after sin contenido de texto a la izquierda y a la derecha y los coloca centrados verticalmente.
Si tiene alguna pregunta sobre los detalles, no dude en preguntar.
·
Santiago Trujillo
Report
Answer question