Call to Action with Button

[iamtakashi]

<!-- wp:group {"align":"full","style":{"spacing":{"padding":{"top":"7vw","bottom":"7vw"},"margin":{"top":"0px","bottom":"0px"}}},"layout":{"inherit":true}} -->
<div class="wp-block-group alignfull" style="margin-top:0px;margin-bottom:0px;padding-top:7vw;padding-bottom:7vw"><!-- wp:group {"align":"wide","style":{"border":{"radius":"28px"},"elements":{"link":{"color":{"text":"#f6f4ed"}}},"spacing":{"padding":{"top":"4vw","bottom":"4vw","right":"5.8%","left":"5.8%"}},"color":{"background":"#121313","text":"#f6f4ed"}}} -->
<div class="wp-block-group alignwide has-text-color has-background has-link-color" style="border-radius:28px;color:#f6f4ed;background-color:#121313;padding-top:4vw;padding-right:5.8%;padding-bottom:4vw;padding-left:5.8%"><!-- wp:group {"style":{"spacing":{"blockGap":"16px"}}} -->
<div class="wp-block-group"><!-- wp:paragraph {"fontSize":"medium"} -->
<p class="has-medium-font-size">Have a project in mind?</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":3,"style":{"typography":{"fontSize":"3.125rem"}}} -->
<h3 style="font-size:3.125rem">We'd love to work with you.</h3>
<!-- /wp:heading --></div>
<!-- /wp:group -->

<!-- wp:buttons -->
<div class="wp-block-buttons"><!-- wp:button {"style":{"color":{"text":"#002a32","background":"#f6f4ed"},"typography":{"fontSize":"1.0625rem"}}} -->
<div class="wp-block-button has-custom-font-size" style="font-size:1.0625rem"><a class="wp-block-button__link has-text-color has-background wp-element-button" style="color:#002a32;background-color:#f6f4ed">Contact Us</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons --></div>
<!-- /wp:group --></div>
<!-- /wp:group -->

https://dotcompatterns.wordpress.com/?p=5625&preview=true

[alaczek]

Looks good in a theme with white/light background, but not so much with dark background color. Have you considered using foreground/background color presets for this, but reversed? This way it would blend better when inserted into a theme with any background color:

Geologist Blue

Geologist Yellow

Geologist

Here's the code:

<!-- wp:group {"align":"full","style":{"spacing":{"padding":{"top":"7vw","bottom":"7vw"},"margin":{"top":"0px","bottom":"0px"}}},"layout":{"inherit":true}} -->
<div class="wp-block-group alignfull" style="margin-top:0px;margin-bottom:0px;padding-top:7vw;padding-bottom:7vw"><!-- wp:group {"align":"wide","style":{"border":{"radius":"28px"},"elements":{"link":{"color":{"text":"var:preset|color|tertiary"}}},"spacing":{"padding":{"top":"4vw","bottom":"4vw","right":"5.8%","left":"5.8%"}}},"backgroundColor":"foreground","textColor":"background"} -->
<div class="wp-block-group alignwide has-background-color has-foreground-background-color has-text-color has-background has-link-color" style="border-radius:28px;padding-top:4vw;padding-right:5.8%;padding-bottom:4vw;padding-left:5.8%"><!-- wp:group {"style":{"spacing":{"blockGap":"16px"}}} -->
<div class="wp-block-group"><!-- wp:paragraph {"fontSize":"medium"} -->
<p class="has-medium-font-size">Have a project in mind?</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":3,"style":{"typography":{"fontSize":"3.125rem"}}} -->
<h3 style="font-size:3.125rem">We'd love to work with you.</h3>
<!-- /wp:heading --></div>
<!-- /wp:group -->

<!-- wp:buttons -->
<div class="wp-block-buttons"><!-- wp:button {"backgroundColor":"background","textColor":"foreground","style":{"typography":{"fontSize":"1.0625rem"}},"className":"is-style-fill"} -->
<div class="wp-block-button has-custom-font-size is-style-fill" style="font-size:1.0625rem"><a class="wp-block-button__link has-foreground-color has-background-background-color has-text-color has-background wp-element-button">Contact Us</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons --></div>
<!-- /wp:group --></div>
<!-- /wp:group -->

[onuro]

I was going to suggest the same, nice one @alaczek !

[iamtakashi]

Yeah, let's do that. It's good to do that when there is no image involved.