Surround website field with css button

Hi, hope that someone can steer me in the right direction.

What I would like to do is change the displayed website url in the "Userlist Value Layout" from :[value] which shows Website: website url so it is surrounded by CSS that creates a shadowed button Asking people to "Click to view Website" instead of showing the (often) long url itself.

I have tried the following code
<button class="w3-btn w3-white w3-border w3-border-grey w3-round-xlarge">
Click to View Website
</button>

The effect of which works, BUT when I add the <a href="[value]"><button class="w3-btn w3-white w3-border w3-border-grey w3-round-xlarge">
Click to View Website
</button></a>

I end up with the Hyperlink and ">the shadowed button alongside it which does not link to the required link.

The [value] substitution is always formatted. If you want to substitute in the raw stored value you need to use [FIELD_NAME]. In the case of a Web Address field that will be the URL they supplied. See the below tutorial for further substitution usage information.

www.joomlapolis.com/documentation/279-community-builder/tutorials/18353-using-substitutions-throughout-cb