> For the complete documentation index, see [llms.txt](https://catchonlabs.gitbook.io/catchon-labs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://catchonlabs.gitbook.io/catchon-labs/catchon-cdn/css-attributes-usage.md).

# CSS attributes usage

**If coding by React/Static html, copy/paste the following example into your website.**

**If using Webflow/Wix/Wordpress, know how to use these attribute, then go to** [**configurations**](/catchon-labs/catchon-cdn/css-element-configurations.md)**.** 

Add customized attributes in css elements to make css elements interact with blockchain. 

## Wallet connect 

<table><thead><tr><th>customized attribute name</th><th width="141.33333333333331">value</th><th>description</th></tr></thead><tbody><tr><td>connect-button</td><td>"true"</td><td>Turn this button to a connect wallet button</td></tr><tr><td></td><td></td><td></td></tr></tbody></table>

For example,&#x20;

```html
<button connect-button="true">
  Connect wallet
</button>
```

## Read contract

Add a CSS element with customized attributtion **function-name="\<The view function name>"**

For example, read contract name:

```
  <a function-name="name">
    Name
  </a>
```

If the read-only function needs inputs, add attribution **function-name="\<The view function name>" function-name-args-\<The arg name>=\<The value of args>** For example, read token balance of address 0x5a3B85334612a18cCE4Eef4567c1DF543433AdC4:

```
  <h3 function-name="balanceOf" function-name-args-owner="0x5a3B85334612a18cCE4Eef4567c1DF543433AdC4">
    balanceOf
  </h3>
```

**function-name-args-\<The arg name>="--self-wallet"** means the filed will use user's wallet address as input. For example,

```
  <h3 function-name="balanceOf" function-name-args-owner="--self-wallet">
    balanceOf
  </h3>
```

**function-name-return>=""** means only part of the return information will show after reading contract. **function-name-output-type=""** means the output format of the return value. For example, the saleConfig's output has two fileds, one of them is **publicSaleStartTime**. The text will only show the **publicSaleStartTime** in css element. The output type is **time**, means the **publicSaleStartTime** will show the local time in a time format.

```
  <h3 function-name="saleConfig" function-name-return="publicSaleStartTime" function-name-output-type="time">
    saleConfig
  </h3>
```

## Write contract

Add a CSS element with customized attribution **function-name="\<The write function name>"** If the function is payable, use attribution **function-name-value-in-eth=""**

For example, the following part means calling mint function with quantity 1 and paying 0.000001 eth for this transaction.

```
  <button function-name="mint" function-name-value-in-eth="0.000001" function-name-args-quantity="1">
    Mint 1 with fixed price
  </button>
```

After click the button, a dialog will pop up. If the argument has been assigned by attribution, user cannot change it, and input will be disabled.

<br>