如何使用带有HTML值作为短代码属性的HTML创建短代码？

I am trying to create a shortcode for a click-to-copy coupon button. I am using HTML.

How do I use HTML dynamically so that it takes input in the form of shortcode attribute?

This is the HTML code I want to shortcode:

<span class="copy-button click-to-copy" data-clipboard-action="copy" data-clipboard-target="#copy-target">
  <span id="copy-target" class="target">Click Here</span>
  <span class="hidden copy">Copy</span>
  <span class="hidden copied">Copied</span>
</span>

The part Click Here has to be dynamic. It should be replaced by the shortcode attribute.

Suppose the shortcode is [coupon] then Click Here should have the value that I put inside [coupon value=" "] or any other attribute.

Okay, I checked the WordPress documentation as suggested by Scuzzy and got it working.

I created a separate PHP file and included it in WordPress functions.php

Then I used the following code:

<?php
function coupon_function( $atts = array() ) {

    // set up default parameters
    extract(shortcode_atts(array(
     'code' => 'Coupon Code Here'
    ), $atts));

    return '<span class="copy-button click-to-copy" data-clipboard-action="copy" data-clipboard-target="#copy-target"><span id="copy-target" class="target">' . $code . '</span><span class="hidden copy">Copy</span><span class="hidden copied">Copied</span></span>';
}
add_shortcode('coupon', 'coupon_function');
?>

Then I tried this shortcode [coupon code="test"] and it worked perfectly.

Thanks