你将如何制作一个透明按钮？ [关闭]答案

【问题标题】：How would you make a transparent button? [closed]你将如何制作一个透明按钮？ [关闭]
【发布时间】：2014-02-02 23:18:35
【问题描述】：

所以我有一张黑白图片作为我的背景，我正在为我的网站制作联系页面。一切都很顺利，唯一的问题是我想制作一个透明按钮，它周围有一个白色边框，就像http://yokedesign.com.au/contact/ 上的一样有什么想法吗？

【问题讨论】：

jsfiddle.net/YDjJA/1
HTML CSS Invisible Button 的可能副本

标签： html css

【解决方案1】：

你只需要制作按钮的background-color: transparent：

小提琴：http://jsfiddle.net/TQ357/

然后，如果您希望边框与背景完全融合，也可以使边框透明。

【讨论】：

【解决方案2】：

您引用的特定示例是添加了边框的锚标记。它已使用内联 css 进行样式设置，这不是最佳实践，但可以轻松移动到外部 css 文件。大多数大型浏览器都包含捆绑或作为插件的开发人员工具。使用这些工具，您可以右键单击并检查页面上的元素并查看应用的 html 和样式。

【讨论】：

【解决方案3】：

看起来您的示例使用了带有 CSS 样式和 JS 处理程序的 <a> 锚点。这是一些 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>

【讨论】：

@Pawel_W 内联 js 没有理由仅仅因为内联就不好。对于较大的项目很难维护，但使用它内联可以简化操作，这是他问题的答案；让他明白。
@agconti 正是我的意图，但为了满足势利小人，我进行了编辑。
@agconti 你听说过分离视图和控制器吗？
@agconti 您的background: transparent; 编辑是不必要的，因为默认情况下锚标签上的背景是透明的。
我没有编辑任何东西