How would you make a transparent button?

Question

So I Have a black and white picture as my background, and I'm making the contact page for my site. Everything is going smooth the only problem is I want to make a transparent button that has a white border around it like on http://yokedesign.com.au/contact/ any ideas?

Answer 1

You just need to make the background-color: transparent of the button:

Fiddle: http://jsfiddle.net/TQ357/

Then, you could make the border transparent as well if you wanted it to be completely blended in with the background.

Answer 2

The particular example you cited is an anchor tag with a border added to it. It has been styled using inline css, which is not best-practice, but could easily be moved to an external css file. Most of the big browsers include developer tools either bundled or as a plugin. With these tools you can right-click and inspect an element on the page and see the html and styles applied.

Answer 3

Looks like your example uses an <a> anchor with CSS styling and a JS handler. Here's some CSS:

a.contact-submit {
    border: 1px solid #FFF;
    padding: 5px 10px;
    float: right;
    color: #FFF;
}

And the anchor (let's say you're using jQuery):

<form id="form-name">
    <a href="#" class="contact-submit"> SEND </a>
</form>
<script type="text/javascript">
    $(document).ready(function() {
        $('.contact-submit').click(function(e) {
            e.preventDefault();
            $('#form-name').submit();
        });
    });
</script>