CSSスタイルのボタンは機能しませんか？

Question

私はCSS Button Generatorでスタイリングしました。なぜなら、私はCSSで怠惰で恐ろしいからです。しかし、コードを貼り付けるのはひどい試みの前に働いていました！

コンテキストのために、私は自分のコード全体をペーストビンのリンクに追加することにしました。あまりにも面倒であれば申し訳ありません。 Click here.

私はそれを動作させることはできませんが、派手なCSSスタイルが表示されている場合、ボタンは機能しません。ボタンが機能している場合は、ハイパーリンクされたバージョンです。助けて？

Answer 1

私は、私の知る限りdocument.getElementById("myButton").addEventListener("click", function()は、このようなスクリプトタグ

に保つ必要がある知っている、自分自身初心者だけど：それは

Answer 2

悲しいことにハイパーリンク文句を言わない仕事を働いていた場合

<script> 
document.getElementById("myButton").addEventListener("click", function() 
</script> 

チェックボタンのように見えますが、それは1つのように見えるようにすることができます

私の提案は、あなたがハイをスタイルしようとした意味でボタンをスタイルすることですテストの天気ハイパーリンクをボタンとして機能することができ、簡単なデバッグ方法は、この質問を閉じたハイパーリンク

にonclickを追加することが、私はこの作品あなた Add onclick event to hyperlink

Answer 3

を利益を得ることができると感じ受け入れ答えを持っていることになる

をperlink。 。次のコードをコピーアリは試すこと

document.getElementById("myButton").addEventListener("click", function(){alert();})

<a href="#" class="myButton" id="myButton">green</a> 
 

 
<style> 
 
.myButton { 
 
\t background-color:#44c767; 
 
\t -moz-border-radius:28px; 
 
\t -webkit-border-radius:28px; 
 
\t border-radius:28px; 
 
\t border:1px solid #18ab29; 
 
\t display:inline-block; 
 
\t cursor:pointer; 
 
\t color:#ffffff; 
 
\t font-family:Arial; 
 
\t font-size:17px; 
 
\t padding:16px 31px; 
 
\t text-decoration:none; 
 
\t text-shadow:0px 1px 0px #2f6627; 
 
} 
 
.myButton:hover { 
 
\t background-color:#5cbf2a; 
 
} 
 
.myButton:active { 
 
\t position:relative; 
 
\t top:1px; 
 
} 
 
</style>