Can I set up a hover animation in CSS depending on a PHP conditional?

No, not like that, hovering is something that happens in the browser, long after PHP has generated the page and shutdown.

Fundamentally, you need to take a different more CSS based approach. Instead of providing static styles manually controlling the colours in PHP, you should instead only track wether it’s dark or light, and specify a HTML class based on that value. Then all styling can be written in CSS, and you can use hover pseudoclasses.

E.g:

$style = get_field( 'learn_more_button_style' );
$url = get_field( 'coe_external_link' );
?>
<div class="layout center <?php echo esc_attr( 'style-'.$style ); ?>">
  <a class="button coe-button" href="https://wordpress.stackexchange.com/questions/352124/<?php echo esc_url( $url ); ?>" target="_blank">Learn More</a>
</div>

Notice I did several things:

  • I fetched all the fields in a single place, don’t mix displaying and retrieving data, it makes things harder to read, your code uglier, and causes problems down the line. For example, what if we needed to check the value of the URL field? We would need to mess around with inline conditionals and ternary operators inside the HTML, but not, we have a nice place we can do it cleanly, and our HTML looks the same
  • I escaped your URL using esc_url, always escape on output for security reasons
  • I renamed the field to learn_more_button_style. By using _style I eliminated any assumptions about what kind of style, so you could have light, dark, jazzy, neon, subdued, high contrast, etc
  • I added a style- class, now you’ll see style-light, which you can use with CSS
  • All the inline style attributes are gone, they’re not necessary

This way, you can style your button like this:

.style-light .button {
  background: white;
  border: 1px solid black;
  color: black;
}

.style-dark .button {
  background: black;
  border: 1px solid white;
  color: white;
}
.style-light .button:hover {
  background: black;
  border: 1px solid white;
  color: white;
}

.style-dark .button:hover {
  background: white;
  border: 1px solid black;
  color: black;
}

At this point, it becomes a pure CSS frontend question, and you don’t need any knowledge of PHP or WordPress to style the buttons further