傻瓜代码：如何让我的按钮移动？答案

【问题标题】：Code for Dummies: How to Make My Button Go?傻瓜代码：如何让我的按钮移动？
【发布时间】：2021-12-01 22:40:32
【问题描述】：

为我的工作使用 DNN 构建一个页面，我不喜欢他们的简码按钮选项，试图自己编写一个。最重要的是，我不知道如何从头开始编码。通常，我可以将其他代码组合在一起作为功能元素。

下面的代码 (alternatively, Codepen) 是我所知道的。我想要一个蓝色按钮、白色文本和白色悬停动作，做到了。我的问题是让按钮转到 GO。我用 Facebook 的链接代替了我们的网站。真的，我只想简单地填写空白代码，我们可以放入网站上的任何块中，以快速更改颜色、链接和显示的文本。我觉得我很接近，但并不完全在那里。关于让我的按钮消失的任何建议？？

        body {
          padding-left: 100px;
        }
    
        input#go {
          background-color: #4c9ed9;
          color: #ffffff;
          padding: 20px 40px;
          border: 1px solid #111;
        }
    
        input#go:hover {
          background-color: #ffffff;
          color: #4c9ed9;
          border: 1px solid #111;
        }

    <html>
    
    <head>
      <title>MK Button 2</title>
    </head>
    
    <body>
      <form>
      <input type="button" id="go" onclick="window.location.href='https://www.facebook.org';" value="Register">
      </form>
        </body>
    
    </html>

【问题讨论】：

你的代码工作正常，它不会在 codepen 上运行，因为它是从网站内的嵌入式编辑器而不是你自己的导航器重定向到 facebook
它无法连接到 facebook 有两个原因：地址错误（.com 不是 .org）以及正如 @YESSINE 所指出的，无论如何，facebook 都会拒绝来自 codepen 的连接。尝试其他网站的地址。

标签： javascript html css button

【解决方案1】：

您的按钮应该按原样“运行” - 但您可能会考虑使用实际的按钮元素，而不是位于表单标签中的 type=button 的输入元素。这更容易插入。

button#go {
      background-color: #4c9ed9;
      color: #ffffff;
      padding: 20px 40px;
      border: 1px solid #111;
    }

    button#go:hover {
      background-color: #ffffff;
      color: #4c9ed9;
      border: 1px solid #111;
    }

&lt;button id="go" onclick="window.location.href='https://www.facebook.org';"&gt;Register&lt;/button&gt;

【讨论】：

FB地址有问题（加上codepen连接不上）。
是的，他们说这只是 FPO。我以为他们会把自己的网站 URL 放在那里。