CSS を使用して入力ボタン画像とそのホバー効果のスタイルを設定するにはどうすればよいですか?

CSS を使用した入力ボタン画像のスタイル設定

はじめに

HTML を使用して画像を含む入力ボタンを作成するのは簡単ですが、CSS を使用して外観を変更することは可能です。挑戦的であること。この記事では、CSS ソリューションを使用して入力ボタンに画像を追加し、ホバー時の外観を変更する問題について説明します。

問題

一部のユーザーは、CSS を使用して入力ボタンのスタイルを設定しようとします。イメージですが、困難に直面しています。カスタム CSS クラスを定義しようとしますが、目的のホバー効果を実現できません。

解決策

CSS を使用して画像で入力ボタンのスタイルを設定するには、「タイプ」を使用する必要があります。属性。" 「type='image'」の代わりに、タイプを「type='submit'」に設定します。これにより、CSS を使用してボタンの外観を制御できるようになります。

<input type="submit">

ボタンが設定されたら「送信」ボタンとして、「myButton」クラスに CSS スタイルを適用して、背景として画像を追加するなど、その外観を定義できます。

.myButton {
    background:url(/images/Btn.PNG) no-repeat;
    cursor:pointer;
    width: 200px;
    height: 100px;
    border: none;
}

これにより、このアプローチでは、「:hover」疑似クラスを使用してホバー時のボタンの外観を変更できます。

.myButton:hover {
    background-color: #ff0000;
}

この CSS ソリューションでは、画像を使用した入力ボタンのスタイル設定とホバー効果が可能になり、直面している問題に対処できます。ユーザーによる。ただし、Safari はこの特定のスタイル設定方法をサポートしていない可能性があることに注意することが重要です。その場合、画像と onclick 関数を使用してフォームを送信する必要がある場合があります。

以上がCSS を使用して入力ボタン画像とそのホバー効果のスタイルを設定するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。