Как сделать прозрачную кнопку?

Question

Итак, у меня есть черно-белое изображение в качестве фона, и я создаю страницу контактов для своего сайта. Все идет гладко, единственная проблема заключается в том, что я хочу сделать прозрачную кнопку с белой рамкой вокруг нее, как на http://yokedesign.com.au/contact/ любые идеи?

Answer 1

Вам просто нужно сделать background-color: transparent кнопки:

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

Тогда вы могли бы сделать границы прозрачными, а если вы хотите, чтобы это было полностью смешивается с фоном.

Answer 2

Конкретный пример, который вы указали, представляет собой якорный тег с добавленной к нему границей. Он был разработан с использованием встроенного css, который не является оптимальным, но может быть легко перемещен во внешний файл css. Большинство крупных браузеров включают в себя инструменты разработчика либо в комплекте, либо как плагин. С помощью этих инструментов вы можете щелкнуть правой кнопкой мыши и проверить элемент на странице и увидеть применяемые html и стили.

Answer 3

Похоже, что в вашем примере используется якорь <a> с стилем CSS и JS-обработчиком. Вот некоторые CSS:

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

И якорь (скажем, вы используете 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>