I created an HTML button using anchor tag which is composed of three images as shown below:

```
<body>
    <ul>
        <li>
            <a href="#" class="my_button">
                <div style="width:77px">
                    <div class="left"></div>
                    <div class="middle">Log In</div>
                    <div class="right"></div>
                </div>
            </a>
        </li>
    </ul>
</body>

```

The result button will be as below:

![button image](https://i.stack.imgur.com/o7u3z.png)

My CSS code:

```
.my_button .left {
    background: url("./images/left.png") left center no-repeat;
}

.my_button .right {
    background: url("./images/right.png") left center no-repeat;
}

.my_button .middle {
    color:#FFFAF0;
    background: url("./images/middle.png") repeat-x;
}

```

Is there any better way to create a button composing three images? Because I have to create 10 buttons in my page and there will be duplicated code if I follow the above approach for 10 buttons. Do you have any suggestions?