<a class="button">Click me</a>

/* Define CSS variables in the :root selector for global scope */
:root {
  --main-color: #3498db;       /* Main color variable */
  --secondary-color: #2ecc71;  /* Secondary color variable */
  --padding: 10px;             /* Padding variable */
}

/* Example class using CSS variables */
.button {
  background-color: var(--main-color);  /* Apply main color as background */
  color: #fff;                          /* Set text color to white */
  padding: var(--padding);              /* Apply padding using the defined variable */
  border: none;                         /* Remove default border */
  border-radius: 5px;                   /* Add rounded corners */
  font-size: 16px;                      /* Set font size */
  cursor: pointer;                      /* Change cursor to pointer on hover */
  transition: background-color 0.3s;    /* Add transition effect on background color change */
}

/* Example hover effect using CSS variables */
.button:hover {
  background-color: var(--secondary-color); /* Change background color on hover */
}