1

私はボタンを私が望むように見せようとしています。私はこれを行うことができましたが、フォームの投稿にjavascriptを使用するように要求されたことが問題であり、これはこのWebサイトのアクセシビリティを完全に壊しています.

したがって、テキストのみではなく、すべてのボタンでマウスホバー<input type"submit" />効果を維持しながら使用して、同じ効果を得る方法を知りたいです(私の最初の解決策にはこの問題がありました)。

ボタンの外観は次のとおりです (マウスオーバー効果も確認できます)。

マウスオーバー効果でスタイル設定されたボタン

ここでフィドルを見つけることができます: http://jsfiddle.net/FireDragonDoL/hjC7P/

コードは次のとおりです。

HTML

<html>
  <head>
    <title>Test</title>
  </head>
  <body>
    <div class="nothing">
      <div class="button"><span><span>Leggi tutto</span></span></div><br /><br />
    </div>
    <div class="container">
      <div class="button"><span><span>Leggi tutto</span></span></div><br /><br />
    </div>
  </body>
</html>

CSS

* {
    outline:none;
    border:0;
}
body {
    margin:0;
    font-family:Georgia, "Times New Roman", Times, serif;
}
a {
    color:#750e0e;
    text-decoration:none;
}
a.reverse-color {
    color: #D6D6B0;
    text-decoration: none;
}
.container .button {
    background: url("https://dl.dropbox.com/u/762638/Stackoverflow/ButtonStyled/bkg_btn_hover.png") no-repeat scroll 1px 0 transparent;
}
.container .button span {
    background: url("https://dl.dropbox.com/u/762638/Stackoverflow/ButtonStyled/bkg_btn_hover.png") no-repeat scroll 100% 0 transparent;
}
.button {
    background: url("https://dl.dropbox.com/u/762638/Stackoverflow/ButtonStyled/bkg_btn_rosso.png") no-repeat scroll 1px 0 transparent;
    border: 0 none;
    cursor: pointer;
    height: 60px;
    margin: 0;
    overflow: visible;
    padding: 0 0 0 15px;
    width: auto;
    float:right
}
.button span {
    background: url("https://dl.dropbox.com/u/762638/Stackoverflow/ButtonStyled/bkg_btn_rosso.png") no-repeat scroll 100% 0 transparent;
    color: #750E0E;
    float: left;
    font-size: 14px;
    font-weight: bold;
    height: 60px;
    text-align: center;
    text-shadow: 0 1px #D7E9A4 !important;
    white-space: nowrap;
    text-shadow:1px 1px #FFFFFF;
}
.button:hover span {
    color:#333;
}
.button span span {
    line-height: 52px;
    padding: 0 20px 0 0;
}
.button:hover {
    background: url("https://dl.dropbox.com/u/762638/Stackoverflow/ButtonStyled/bkg_btn_hover.png") no-repeat scroll 1px 0 transparent;
}
.button:hover span {
    background: url("https://dl.dropbox.com/u/762638/Stackoverflow/ButtonStyled/bkg_btn_hover.png") no-repeat scroll 100% 0 transparent;
}
.container, .nothing {
  clear: both;
    overflow:hidden;
    padding:10px 0;
}

私が持っている唯一のアイデアは、実際にはボタンの背景の大きな画像（おそらくより広い）を使用し<input type="image" />、 を使用することですが、その場合、画像の上にテキストを配置する方法がわかりません。

任意の提案をいただければ幸いです

4

2 に答える 2

0

現時点では、単一の html 要素でこれを行う方法はありません。たぶん:before、:after何かを行うことができますposition: relative。

現時点では、これらの項目を「送信」ボタンに変換する JavaScript コードを使用します。

于 2013-01-24T13:12:32.600 に答える
0

可能ですが、ブラウザが異なると問題が発生します。簡単な方法は、テキストに画像を含めることです。ホバー効果にスプライト技術を使用します。

于 2013-01-07T07:24:53.393 に答える