Archived topic

Buttons equally width and more spacing around them

5 replies · Started by Henk on January 7, 2022

Viewing posts 1–6 of 6

January 7, 2022 at 4:38 am #2072228

Hi,

On the frontpage I'm using an Element with the following code:

<div class="frontpage-hero-contents">
	<h1 class="frontpage-hero-title">name of companyt</h1>
	<a href="#contactformulier">send us a message</a>
	<a href="+999999999">Call us: 9999-9999-999</a>
</div>

I have the following questions:
* how can I make the two buttons have an equal width?
* how can I add more space between the buttons? I can adjust the margins of the button but I needs to work also in responsive mode.
* how can I increase the space between the H1 and the buttons as a group?

h1.plaats-hero-title {
	color: white;
	margin-left: auto; 
	margin-right: auto;
	width:75%;
	text-shadow: 0 0px 2px #fff;
	opacity: 0.9; /* font more blended with background*/
}

@media (max-width: 767px) {

	h1.frontpage-hero-title {
	font-size: 25px;
	color: white;
	margin-left: auto; 
	margin-right: auto;
	width:95%;
	text-shadow: 0 0px 1px #fff;
	opacity: 0.9; /* font more blended with background*/
	}
}

.CTA-knop,
.CTA-knop:visited {
	display: inline-flex;
  align-items: center;
  justify-content: center;
	font-size: 1em;
	background-color: #fe7f2d;
  color: white;
	margin-bottom: 10px;
  border-radius: 8px;
	box-shadow: 0 3px 5px rgba(0, 0, 0, 0.18);
	padding: 20px 30px 20px 30px;
	padding: 0.25em 0.75em;
  min-width: 10ch;
  min-height: 44px;
	text-align: center;
  line-height: 1.1;
	border: 2px solid #cd7213; 
	transition: 220ms all ease-in-out;
	user-select: none; /* text cannot be selected by user */
  -webkit-user-select: none;
	touch-action: manipulation; /*  avoid page zoom on mobile phone on double tapping */
}

Thanks, Henk.

January 7, 2022 at 6:51 am #2072313

Hi there,

first thing would be to add a wrapper to your buttons HTML eg.

<div class="frontpage-hero-contents">
    <h1 class="frontpage-hero-title">name of companyt</h1>
    <div class="frontpage-hero-buttons">
        <a href="#contactformulier">send us a message</a>
        <a href="+999999999">Call us: 9999-9999-999</a>
    </div>
</div>

Once thats in place we can look at the CSS to make those changes you require.

January 7, 2022 at 7:50 am #2072517

Hi David,

I added the

, that was the easy part.

How can I make the two buttons have an equal width?
Both on desktop and responsive mode?

How can I add more space between the buttons?
I specified it now with the left and right margins of the buttons with 10px. But what happens when they are stacked in responsive mode? Do I get than the right behavior or is there a best-practice?

* how can I increase the space between the H1 and the buttons as a group?
I solved this by using the following CSS:

.frontpage-hero-buttons {
	display: block;
	margin-top: 50px;
	margin-bottom: 50px;
	}

January 7, 2022 at 8:12 am #2072546

I would use this CSS to make the -hero-buttons a flex container that remains centred and has a max-width:

.frontpage-hero-buttons {
    display: flex;
    justify-content: center;
    max-width: 700px;
    margin: 50px auto;
}

And then we add some left/right margin to our buttons and discount those margins from our flex-basis:

.frontpage-hero-buttons .CTA-knop {
    margin: 0 20px;
    flex: 1 0 calc( 50% - 40px );
}

This property: flex: 1 0 calc( 50% - 40px ); tells the buttons they can 1 grow to fill available space, but should not 0 shrink and ideally we want the basis to fill 50% of the flex wrapper minus the 40px of horizontal margins we added.

January 7, 2022 at 8:30 am #2072552

Thanks David.
And especially for your explanation, I'm going to study that so I understand it.

January 7, 2022 at 8:35 am #2072556

You're welcome !

This archived topic is closed to new replies.

Start building better websites today.