# 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>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://catchonlabs.gitbook.io/catchon-labs/catchon-cdn/css-attributes-usage.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.