Usr SVGs for arrows on buttons

source/_includes/button.html.twig

@@ -1,5 +1,13 @@
 <div class="my-4 not-prose {{ position == 'centre' ? 'flex justify-center' }}">
-  <a class="inline-flex justify-center items-center py-3 px-6 w-full text-base font-medium text-white no-underline rounded-md duration-200 ease-in-out md:w-auto hover:bg-white focus:bg-white bg-blue-primary transition-color hover:text-blue-primary focus:text-blue-primary"href="{{ url }}">
-    {{ text|raw }}
-  </a>
+    <a class="inline-flex justify-center items-center py-3 px-6 w-full text-base font-medium text-white no-underline rounded-md duration-200 ease-in-out md:w-auto hover:bg-white focus:bg-white bg-blue-primary transition-color gap-2 hover:text-blue-primary focus:text-blue-primary" href="{{ url }}">
+        <span>
+            {{ text|raw }}
+        </span>
+
+        <span>
+            <svg class="size-3" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
+                <path stroke-linecap="round" stroke-linejoin="round" d="M17.25 8.25 21 12m0 0-3.75 3.75M21 12H3" />
+            </svg>
+        </span>
+    </a>
 </div>

source/_pages/call.html.twig

@@ -37,9 +37,10 @@ faqs:
 {# 1st call to action #}
 
 {% include 'button' with {
-  position: 'centre',
-  text: 'Book your call now →',
-  url: page.link,
+    position: 'centre',
+    text: 'Book your call now',
+    url: page.link,
+    withArrow: true,
 } %}
 
 <h2>Some things I can help you with</h2>
@@ -61,9 +62,10 @@ faqs:
 <p>In this 1-on-1 video call, I can help you answer questions in these areas or any others you may have.</p>
 
 {% include 'button' with {
-  position: 'centre',
-  text: 'Book your call now &rarr;',
-  url: page.link,
+    position: 'centre',
+    text: 'Book your call now',
+    url: page.link,
+    withArrow: true,
 } %}
 
 {# Social proof #}
@@ -103,8 +105,9 @@ faqs:
 } %}
   {% block callout_content %}
     {% include 'button.html.twig' with {
-      text: 'Book your call now for £' ~ page.price|number_format ~ ' &rarr;',
-      url: page.link,
+        text: 'Book your call now for £' ~ page.price|number_format ~ '',
+        url: page.link,
+        withArrow: true,
     } %}
 
     <p class="mb-0">You can pay and reserve your time slot straight away. There are a limited number of available slots each month. If, after the call, you decide to do a longer engagement with me, the cost of this call will be deducted from that engagement.</p>

source/_pages/drupal-upgrade.md

@@ -37,8 +37,9 @@ An upgrade roadmap is a personalised audit of your Drupal website and includes d
 {# 1st call to action #}
 
 {% include 'button.html.twig' with {
-  text: page.button.text ~ ' →',
+  text: page.button.text ~ ' ',
   url: page.button.url,
+  withArrow: true,
 } %}
 
 ## How does it work?
@@ -54,8 +55,9 @@ An upgrade roadmap is a personalised audit of your Drupal website and includes d
 {# 2nd CTA #}
 
 {% include 'button.html.twig' with {
-  text: page.button.text ~ ' →',
+  text: page.button.text,
   url: page.button.url,
+  withArrow: true,
 } %}
 
 {# Social proof #}

source/_pages/dto.md

@@ -35,8 +35,9 @@ The workshop is currently only available remotely, and the next available date i
 Seats are available at <span class="font-bold">{{ page.is_early_bird ? 'an early bird price of £' ~ page.prices.early : 'a price of £' ~ page.prices.full }}</span>, with a 10% discount for bulk orders of 5 or more seats.
 
 {% include 'button.html.twig' with {
-  text: 'Book your seat &rarr;',
+  text: 'Book your seat',
   url: 'https://buy.stripe.com/aEU9Bk2KmaPM3Be8wJ',
+  withArrow: true,
 } %}
 
 <hr />

source/_pages/index.md

@@ -17,8 +17,9 @@ I'm a Drupal core contributor, module and theme maintainer, former Developer for
 
 {% include 'button' with {
     position: 'centre',
-    text: 'Click here to email Oliver →',
+    text: 'Click here to email Oliver',
     url: 'mailto:' ~ site.email,
+    withArrow: true,
 } %}
 
 ## What I can help you with
@@ -50,8 +51,9 @@ Here are [all my products and services][pricing]. If you still can't find what y
         <div>
             {% include 'button' with {
                 position: 'centre',
-                text: 'Click here to email Oliver &rarr;',
+                text: 'Click here to email Oliver',
                 url: 'mailto:' ~ site.email,
+                withArrow: true,
             } %}
         </div>
       </div>

source/_pages/pair.html.twig

@@ -63,8 +63,9 @@ link: https://savvycal.com/opdavies/pair
 } %}
   {% block callout_content %}
     {% include 'button.html.twig' with {
-      text: 'Book your session now for £' ~ page.price|number_format ~ ' →',
+      text: 'Book your session now for £' ~ page.price|number_format ~ ' ',
       url: page.link,
+      withArrow: true,
     } %}
 
     <p class="mb-0">You can pay and reserve your time slot straight away. There are a limited number of available slots each month. If, after the call, you decide to do a longer engagement with me, the cost of this call will be deducted from that engagement.</p>

source/_pages/subscription.md

@@ -151,8 +151,9 @@ High quality code that just works. Or I fix it, for free!
 
     <footer class="mt-6">
       {% include 'button.html.twig' with {
-        text: 'Register now for the ' ~ plan.name|lower ~ ' plan &rarr;',
+        text: 'Register now for the ' ~ plan.name|lower ~ ' plan',
         url: plan.url,
+        withArrow: true,
       } %}
     </footer>
   </div>
@@ -165,9 +166,10 @@ High quality code that just works. Or I fix it, for free!
 And we'll figure out what's best for you.
 
 {% include 'button' with {
-    text: 'Get in touch &rarr;',
+    text: 'Get in touch',
     type: 'secondary',
     url: 'https://savvycal.com/opdavies/subscription',
+    withArrow: true,
 } %}
 
 ---

source/_pages/team-coaching.html.twig

@@ -32,8 +32,9 @@ meta:
       <div class="mt-8">
         {% include 'button.html.twig' with {
           position: 'centre',
-          text: 'Apply now &rarr;',
+          text: 'Apply now',
           url: page.form_url,
+          withArrow: true,
         } %}
       </div>
     </div>
@@ -80,8 +81,9 @@ meta:
       <div class="my-8">
         {% include 'button.html.twig' with {
           position: 'centre',
-          text: 'Apply now &rarr;',
+          text: 'Apply now',
           url: page.form_url,
+          withArrow: true,
         } %}
       </div>
 

source/_pages/things-about-php.md

@@ -56,7 +56,8 @@ I offer consulting calls and services to reduce your onboarding time and get you
 
 <div class="mt-6">
   {% include 'button.html.twig' with {
-    text: 'Book your call &rarr;',
+    text: 'Book your call ',
     url: '/call',
+    withArrow: true,
   } %}
 </div>