CSS/HTML自定义按钮IFTTT点击事件

Question

我正在尝试制作一个使用 IFTTT 触发电子邮件的按钮，我使用 class 对按钮进行了编码，该按钮在网站上绘制出该按钮，单击该按钮时没有任何反应。

    First name:<br>
    <input type="text" name="value1"><br>
    Last name:<br>
    <input type="text" name="value2">
    <div class="button">
        <!--Send E-Mail!-->
        <button name="sendmailbutton" value="send email">Send E-Mail</button>
    </div>

.button {
    background-color: #00FFFF; 
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    border-radius: 2px;
    -webkit-transition-duration: 0.4s; 
    transition-duration: 0.4s;
}

.button:hover {
    background-color: #008b8b; 
    color: white;

Answer 1

问题是，至少是我的问题；包含 <button> 的 <div> 元素的 HTML/CSS 只是将 <button> 推到中心，这意味着您可以单击 <div> 但是你实际上不是 focusing/activating 按钮。

看看这里（出于显而易见的原因，我已经删除了密钥）；

http://plnkr.co/edit/MV075bPS4Oq0dOKrT2vG?p=preview

CSS;

.my-button-css {
    background-color: #00FFFF; 
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    border-radius: 2px;
    -webkit-transition-duration: 0.4s; 
    transition-duration: 0.4s;
}

.my-button-css:hover {
    background-color: #008b8b; 
    color: white;
}

HTML;

<form action="https://maker.ifttt.com/trigger/web_button_pressed/with/key/" method="post">
    First name:<br>
    <input type="text" name="value1"><br>
    Last name:<br>
    <input type="text" name="value2">
    <!--Send E-Mail!-->
    <button class="my-button-css" name="sendmailbutton" value="send email">Send E-Mail</button>
</form>

CSS/HTML自定义按钮IFTTT点击事件

CSS/HTML custom button IFTTT click event

html

css

webpage