「ボタン」要素を使用するだけです。何を達成したいのか完全にはわかりませんが、10 個のボタンに同じクラスを与えることができます。
HTML:
<button class="myButton" onClick="location.href='myPage.html'")>Log In</button>
<button class="myButton" onClick="location.href='anotherPage.html'")>Next Link</button>
CSS:
.myButton{
background-image:url("image.jpg");
}
.myButton:hover{
background-image:url("hover.jpg");
}
私はあなたが達成しようとしていることに完全に基づいていない可能性がありますが、それはあなたが達成しようとしていると私が思うものにはうまくいきます.
ボタンのスタイルをまったく設定せず、それ自体で素敵なホバー効果を得ることもできますが、すべてのブラウザーで同じになるわけではありません。
あなたが持っているような通常のアンカータグを使用して、すべてのボタンで動作するクラスを与えることもできます:
<a class="myButton" href="myPage.html">Log In</a>
<a class="myButton" href="anotherPage.html">Link 2</a>
ああ、それをしたくない場合は、ボタンを現在と同じままにして、HTML を複製し、アンカーのリンク先とテキストを次のように変更します。
<body>
<ul>
<li>
<a href="#" class="my_button">
<div style="width:77px">
<div class="left"></div>
<div class="middle">Log In</div>
<div class="right"></div>
</div>
</a>
</li>
<li>
<a href="#1" class="my_button">
<div style="width:77px">
<div class="left"></div>
<div class="middle">Different link</div>
<div class="right"></div>
</div>
</a>
</li>
<li>
<a href="#2" class="my_button">
<div style="width:77px">
<div class="left"></div>
<div class="middle">Another link.</div>
<div class="right"></div>
</div>
</a>
</li>
</ul>
</body>
PHP ソリューションの追加。
functions.php:
<?php
function myButton($link, $title){
echo '<a href="'.$link.'" class="my_button">
<div style="width:77px">
<div class="left"></div>
<div class="middle">'.$title.'</div>
<div class="right"></div>
</div>
</a>';
}
?>
新しいページは page.php (html ではない) になります。
page.php:
<?php
include_once 'functions.php';
?>
<body>
<ul>
<li>
<?php myButton('link.html', 'Click Me') ?>
</li>
<li>
<?php myButton('anotherlink.html', 'No, Click Me!') ?>
</li>
</ul>
</body>
これにより、現在の構造を維持しながら、コードを削減できます。また、コードを 1 行入力するだけで、ボタンを動的に追加できます。
さらに情報が必要な場合はお知らせください。
