フレキシブルなCSSボタン（可変幅とマークアップ）

Question

1つの画像（または2つはスライディングドア技術を使用）でスタイル設定された柔軟なCSSボタンを作成しようとしていますが、複数のマークアップ同じ効果があります。たとえば、次のように転がっ

<input type="submit" value="Button" /> 

任意のアイデアやtuts：

<a href="">Button</a> 

はとして保存する効果を持っていますか？

Answer 1

私はJquery submit event

を使用しますので、あなたはjQueryのを理解していない場合は...

$('#my_button').click(function() { 
    $(this).submit(); 
}); 

これはどんな意味がありません。

Answer 2

私は入力要素にスライドドア技術を適用することはできません。私はbutton要素を使用し、それをやったとき：

<button type="submit"><span>Button</span></button> 

それは少しバギーですので、あなたは、IEに注意する必要があると思います（ボタンの内容を提出するのではなく、値としたときにで複数の送信ボタンを持っていますクリックされたものの代わりにすべてのボタンを提出するフォーム）が、これらのケースは通常は稀です。

<a href="..." class="button"><span>Link</span></a> 

近似CSS：：私が使用したリンクの場合

a.button, 
button { 
    color: #ffffff; 
    background: transparent url(right.png) no-repeat top right; 
    font-weight: bold; 
    text-decoration: none; 
    text-align: center; 
    border: none; 
    padding: 0 8px 0 0; 
    margin: 1px 0; 
    height: 20px; 
    overflow: visible; 
    cursor: pointer; 
} 

a.button::-moz-focus-inner, 
button::-moz-focus-inner { 
    border: none; 
} 

a.button:focus, 
button:focus { 
    outline: 1px dotted buttontext; 
} 

a.button span, 
button span { 
    background: transparent url(left.png) no-repeat top left; 
    padding: 2px 0 4px 8px; 
    display: block; 
} 

Answer 3

あなたはスライドドアを使用する場合は、ちょうど、<input/>周りの要素を追加することができますか？

リンク送信を行うための純粋なCSSソリューションはありません。提出できるHTMLの唯一の要素は入力要素なので、<input type="button" />と<input type="image" />を使用しています。