Updated all button styles

Author: danpastori

docs/app/assets/css/main.css

@@ -40,11 +40,10 @@ ul ul ul {
   border: none !important;
 }
 
-ul ul ul li a:after {
+/* ul ul ul li a:after {
   margin-left: -13px;
-  /* background-color: transparent !important; */
 }
 
 ul li ul li{
   padding-inline-start: 0;
-}
+} */

docs/content/docs/1.getting-started/1.index.md

@@ -128,10 +128,10 @@ src: https://docker-php-public-assets.serversideup.net/docker-demo.mp4
 
 This is just an overview. See the full list of benefits and features below. 
 
-:u-button{to="/docs/getting-started/these-images-vs-others" label="Read more about the advantages" aria-label="Read more about the advantages" size="md" color="primary" variant="outline"  trailing-icon="i-lucide-arrow-right" class="font-bold"}
+:u-button{to="/docs/getting-started/these-images-vs-others" label="Read more about the advantages" aria-label="Read more about the advantages" size="md" color="primary" variant="outline"  trailing-icon="i-lucide-arrow-right" class="font-bold ring ring-inset ring-blue-600 text-blue-600 hover:ring-blue-500 hover:text-blue-500"}
 
 ## Why should I use these PHP Docker Images?
 
 These images are production-ready and optimized for performance and security. We work hard to give you a "batteries included" experience so you can ship PHP with Docker as fast as possible. Click below to see a simple working example.
 
-:u-button{to="/docs/getting-started/installation" label="Installation" aria-label="Installation" size="md" color="primary" variant="outline"  trailing-icon="i-lucide-arrow-right" class="font-bold"}
+:u-button{to="/docs/getting-started/installation" label="Installation" aria-label="Installation" size="md" color="primary" variant="outline"  trailing-icon="i-lucide-arrow-right" class="font-bold ring ring-inset ring-blue-600 text-blue-600 hover:ring-blue-500 hover:text-blue-500"}

docs/content/docs/1.getting-started/2.these-images-vs-others.md

@@ -119,7 +119,7 @@ services:
 
 No Dockerfile modifications. No config file mounting. No image rebuilds. Just simple environment variables with production-ready defaults.
 
-:u-button{to="/docs/reference/environment-variable-specification" label="View all environment variables" aria-label="View all environment variables" size="md" color="primary" variant="outline" trailing-icon="i-lucide-arrow-right" class="font-bold"}
+:u-button{to="/docs/reference/environment-variable-specification" label="View all environment variables" aria-label="View all environment variables" size="md" color="primary" variant="outline" trailing-icon="i-lucide-arrow-right" class="font-bold ring ring-inset ring-blue-600 text-blue-600 hover:ring-blue-500 hover:text-blue-500"}
 
 ### Production-Ready Out of the Box
 
@@ -161,7 +161,7 @@ services:
       AUTORUN_ENABLED: "true"
 ```
 
-:u-button{to="/docs/framework-guides/laravel/automations" label="Learn More About Laravel Automations" aria-label="Learn More About Laravel Automations" size="md" color="primary" variant="outline" trailing-icon="i-lucide-arrow-right" class="font-bold"}
+:u-button{to="/docs/framework-guides/laravel/automations" label="Learn More About Laravel Automations" aria-label="Learn More About Laravel Automations" size="md" color="primary" variant="outline" trailing-icon="i-lucide-arrow-right" class="font-bold ring ring-inset ring-blue-600 text-blue-600 hover:ring-blue-500 hover:text-blue-500"}
 
 **WordPress Optimizations**
 - Pre-installed PHP extensions WordPress needs
@@ -259,13 +259,13 @@ If you're currently managing PHP on traditional servers, the switch to container
 - Version control your entire infrastructure
 
 See our quick start guide to run your first PHP container.
-:u-button{to="/docs/getting-started/installation" label="Quick Start Guide" aria-label="Quick Start Guide" size="md" color="primary" variant="outline" trailing-icon="i-lucide-arrow-right" class="font-bold"}
+:u-button{to="/docs/getting-started/installation" label="Quick Start Guide" aria-label="Quick Start Guide" size="md" color="primary" variant="outline" trailing-icon="i-lucide-arrow-right" class="font-bold ring ring-inset ring-blue-600 text-blue-600 hover:ring-blue-500 hover:text-blue-500"}
 
 ### From Official PHP Images
 
 Already using Docker with official PHP images? Switching is trivially easy.
 
-:u-button{to="/docs/guide/migrating-from-official-php-images" label="Official PHP Migration Guide" aria-label="Official PHP Migration Guide" size="md" color="primary" variant="outline" trailing-icon="i-lucide-arrow-right" class="font-bold"}
+:u-button{to="/docs/guide/migrating-from-official-php-images" label="Official PHP Migration Guide" aria-label="Official PHP Migration Guide" size="md" color="primary" variant="outline" trailing-icon="i-lucide-arrow-right" class="font-bold ring ring-inset ring-blue-600 text-blue-600 hover:ring-blue-500 hover:text-blue-500"}
 
 ### From Other Docker Images
 
@@ -303,13 +303,13 @@ Follow our installation guide to create your first PHP app with Docker in under
 **Migration Guide (Existing Apps)**
 Already have a PHP application? Learn how to containerize it with serversideup/php.
 
-:u-button{to="/docs/guide/migrating-from-official-php-images" label="Migration Guides" aria-label="Migration Guides" size="md" color="primary" variant="outline" trailing-icon="i-lucide-arrow-right" class="font-bold"}
+:u-button{to="/docs/guide/migrating-from-official-php-images" label="Migration Guides" aria-label="Migration Guides" size="md" color="primary" variant="outline" trailing-icon="i-lucide-arrow-right" class="font-bold ring ring-inset ring-blue-600 text-blue-600 hover:ring-blue-500 hover:text-blue-500"}
 
 ### Choose an Image Variation
 
 Not sure which image variation is right for you? We have a guide for that.
 
-:u-button{to="/docs/getting-started/choosing-an-image" label="Choosing an Image" aria-label="Choosing an Image" size="md" color="primary" variant="outline" trailing-icon="i-lucide-arrow-right" class="font-bold"}
+:u-button{to="/docs/getting-started/choosing-an-image" label="Choosing an Image" aria-label="Choosing an Image" size="md" color="primary" variant="outline" trailing-icon="i-lucide-arrow-right" class="font-bold ring ring-inset ring-blue-600 text-blue-600 hover:ring-blue-500 hover:text-blue-500"}
 
 ::
 

docs/content/docs/1.getting-started/3.installation.md

@@ -34,12 +34,12 @@ There are some important terms to understand when working with containers:
 
 If you'd like to learn more about containers, you can learn more following the guide below.
 
-:u-button{to="/docs/deployment-and-production/container-basics" label="Learn More About Containers" aria-label="Learn More About Containers" size="md" color="primary" variant="outline"  trailing-icon="i-lucide-arrow-right" class="font-bold"}
+:u-button{to="/docs/deployment-and-production/container-basics" label="Learn More About Containers" aria-label="Learn More About Containers" size="md" color="primary" variant="outline"  trailing-icon="i-lucide-arrow-right" class="font-bold ring ring-inset ring-blue-600 text-blue-600 hover:ring-blue-500 hover:text-blue-500"}
 
 ## Already using Docker?
 If you're already using the official PHP images, switching will literally take you seconds.
 
-:u-button{to="/docs/guide/migrating-from-official-php-images" label="Learn how to migrate from the official PHP images" aria-label="Learn how to migrate from the official PHP images" size="md" color="primary" variant="outline"  trailing-icon="i-lucide-arrow-right" class="font-bold"}
+:u-button{to="/docs/guide/migrating-from-official-php-images" label="Learn how to migrate from the official PHP images" aria-label="Learn how to migrate from the official PHP images" size="md" color="primary" variant="outline"  trailing-icon="i-lucide-arrow-right" class="font-bold ring ring-inset ring-blue-600 text-blue-600 hover:ring-blue-500 hover:text-blue-500"}
 
 ## Quick Start
 In order to run containers, we need a container engine installed such as Docker. You can follow [Docker's installation guide](https://docs.docker.com/get-started/get-docker/) to get started. Confirm Docker is working by running these commands in your terminal:
@@ -195,4 +195,4 @@ You've successfully created your first PHP app with Docker. Better yet, you've s
 
 If you're curious what the whole process looks like from Development to Production, check out out guide below.
 
-:u-button{to="/docs/deployment-and-production/development-to-production" label="Learn how to deploy your PHP app from Development to Production" aria-label="Learn how to deploy your PHP app from Development to Production" size="md" color="primary" variant="outline"  trailing-icon="i-lucide-arrow-right" class="font-bold"}
+:u-button{to="/docs/deployment-and-production/development-to-production" label="Learn how to deploy your PHP app from Development to Production" aria-label="Learn how to deploy your PHP app from Development to Production" size="md" color="primary" variant="outline"  trailing-icon="i-lucide-arrow-right" class="font-bold ring ring-inset ring-blue-600 text-blue-600 hover:ring-blue-500 hover:text-blue-500"}

docs/content/docs/1.getting-started/4.choosing-an-image.md

@@ -84,36 +84,36 @@ Choose from several variations to suit your needs. Each variation is optimized f
 ### CLI
 The CLI variation is a minimal image designed for running PHP from the command line only. It does not include a web server. Use this variation when you need a disposable and repeatable method for easily running PHP scripts from your terminal.
 
-:u-button{to="/docs/image-variations/cli" label="Learn more about the CLI variation" aria-label="Learn more about the CLI variation" size="md" color="primary" variant="outline"  trailing-icon="i-lucide-arrow-right" class="font-bold"}
+:u-button{to="/docs/image-variations/cli" label="Learn more about the CLI variation" aria-label="Learn more about the CLI variation" size="md" color="primary" variant="outline"  trailing-icon="i-lucide-arrow-right" class="font-bold ring ring-inset ring-blue-600 text-blue-600 hover:ring-blue-500 hover:text-blue-500"}
 
 ### FPM
 The FPM (Fast Process Manager) variation runs PHP-FPM without a web server. This variation is ideal for microservices architectures where you need a dedicated PHP backend.
 
 Use this variation when you already have a separate proxy or load balancer handling static content and routing PHP requests to your FPM container. This is commonly used in larger-scale deployments.
 
-:u-button{to="/docs/image-variations/fpm" label="Learn more about the FPM variation" aria-label="Learn more about the FPM variation" size="md" color="primary" variant="outline"  trailing-icon="i-lucide-arrow-right" class="font-bold"}
+:u-button{to="/docs/image-variations/fpm" label="Learn more about the FPM variation" aria-label="Learn more about the FPM variation" size="md" color="primary" variant="outline"  trailing-icon="i-lucide-arrow-right" class="font-bold ring ring-inset ring-blue-600 text-blue-600 hover:ring-blue-500 hover:text-blue-500"}
 
 ### FPM-Apache
 The FPM-Apache variation combines PHP-FPM with Apache as a reverse proxy. Apache serves static content directly and forwards PHP requests to PHP-FPM for processing.
 
 This is an excellent choice for WordPress sites and applications that specifically require Apache features or `.htaccess` support.
 
-:u-button{to="/docs/image-variations/fpm-apache" label="Learn more about the FPM-Apache variation" aria-label="Learn more about the FPM-Apache variation" size="md" color="primary" variant="outline"  trailing-icon="i-lucide-arrow-right" class="font-bold"}
+:u-button{to="/docs/image-variations/fpm-apache" label="Learn more about the FPM-Apache variation" aria-label="Learn more about the FPM-Apache variation" size="md" color="primary" variant="outline"  trailing-icon="i-lucide-arrow-right" class="font-bold ring ring-inset ring-blue-600 text-blue-600 hover:ring-blue-500 hover:text-blue-500"}
 
 
 ### FPM-NGINX
 The FPM-NGINX variation combines PHP-FPM with NGINX as a reverse proxy. This is the traditional setup that has been widely adopted for modern PHP applications, including many Laravel deployments.
 
 NGINX serves static files efficiently and proxies PHP requests to PHP-FPM, providing excellent performance and flexibility.
 
-:u-button{to="/docs/image-variations/fpm-nginx" label="Learn more about the FPM-NGINX variation" aria-label="Learn more about the FPM-NGINX variation" size="md" color="primary" variant="outline"  trailing-icon="i-lucide-arrow-right" class="font-bold"}
+:u-button{to="/docs/image-variations/fpm-nginx" label="Learn more about the FPM-NGINX variation" aria-label="Learn more about the FPM-NGINX variation" size="md" color="primary" variant="outline"  trailing-icon="i-lucide-arrow-right" class="font-bold ring ring-inset ring-blue-600 text-blue-600 hover:ring-blue-500 hover:text-blue-500"}
 
 ### FrankenPHP
 The FrankenPHP variation is a modern application server built on top of the Caddy web server. It runs everything in a single process, eliminating the complexity of managing PHP-FPM and a separate web server.
 
 Use this variation for Laravel or Symfony applications that can benefit from worker mode, automatic HTTPS, and modern protocols like HTTP/2 and HTTP/3. This is the recommended variation for new projects seeking cutting-edge performance.
 
-:u-button{to="/docs/image-variations/frankenphp" label="Learn more about the FrankenPHP variation" aria-label="Learn more about the FrankenPHP variation" size="md" color="primary" variant="outline"  trailing-icon="i-lucide-arrow-right" class="font-bold"}
+:u-button{to="/docs/image-variations/frankenphp" label="Learn more about the FrankenPHP variation" aria-label="Learn more about the FrankenPHP variation" size="md" color="primary" variant="outline"  trailing-icon="i-lucide-arrow-right" class="font-bold ring ring-inset ring-blue-600 text-blue-600 hover:ring-blue-500 hover:text-blue-500"}
 
 ### Unit (deprecated)
 ::warning{to="https://github.com/nginx/unit?tab=readme-ov-file#nginx-unit" target="_blank"}