css 画像とテキストボタンの作り方

質問

テキスト部分は画像ではなく、画像の隣にテキストが来るようなボタン（テキストが画像になっているものではないです。）が作りたいのですが、作り方がわかりません。ソースを見てもわからず、とても困っています。添付した画像はツイッターのボタンです。このようなボタンが作りたいと思っています。どうかよろしくお願い致します。

回答No.5

ORUKA1951 · ベストアンサー

＞<a href="#">
＞<input type="submit" id="aboutbutton" value="ボタンの名前">
＞</a>

　それはないでしょう。(^^)
<form action="./cgi-bin/***">
　<input type="submit" value="">
</form>
　もしくは
<a href="./**?name=test">送信</a>
　とかでしょう。

　その前後のソースも必要ですが、たとえば
<p class="submit">
　<a href="./**?name=test">送信</a>
</p>
　だとすれば、
p.submit{
　margin-left:2em;
　line-height:30px;
}
p.submit a{
　display:block;
　width:6em;
　height:20px;
　position:relative;
}
p.submit a:before{
　content:url(画像のURL);
}
とか、古いブラウザにも対応するなら
p{
　background:url(画像URL) no-repeat 0 0;
　padding-left:40px;
}
とか・・・
画像を含めてリンクさせたければ
p.submit{
　width:100px;
　height:40px;
}
p.submit a{
　display:block;
　width:100%;
　height:100%;
　margin-left:40px;
}
とか・・・・。
p.submit:before{}で画像を追加しても良いでしょう。
様々な方法がありますが、これはサイト全体や目的、想定するユーザーエージェントなど様々な条件を勘案して総合的に判断するしかないでしょう。

お礼

とても詳しく教えて下さり、ありがとうございました。もっと勉強したいと思います。

回答No.4

ORUKA1951

先ほどは来客で席を立ったため尻切れトンボに・・
文字を画像に置き換えてしまうという古い「非標準な方法」もあります<a href="<img>ほげほげ</a>が、さすがにそれではまずい。
・たとえばHTMLが独立した段落内のリンクでしたら:beforeという擬似要素を使う
・リストだったら、list-style:image;
・それ以外だと、背景にしてしまう
　というのが良いでしょう。・・いずれにしろ、画像を配置するHTMLソースを示してください。

補足

HTMLソースですが、
<a href="#">
<input type="submit" id="aboutbutton" value="ボタンの名前">
</a>
です。
このvalueの値をボタン上に配置し、id="aboutbutton"にcssで背景を設定したのですが、valueの値の位置を右にずらすことが出来なく、画像に重なる形になってしまいます。
非常に分かりづらい質問で申し訳ありません。

回答No.3

DrFell

見本だとボタン形式で全体だけど、左に来るだけのものも作り方は同じ
cssの基本がわかる前提で、

1.画像を用意する。
2.1.の画像を目的のテキストの背景にする。
　ただし、1回のみ、左に
3.2.の画像のテキストと重なってはダメな分だけ、パディングで左を空ける。

以上。

注意
左だけに来るものだと、インライン要素でもブロックライン要素でもOKだが、ボタン形式で高さや幅を指定したい場合はブロック要素にすること。htmlがインライン要素なら、ディスプレイでブロックに見せかけること。

補足

この方法を<input～に用いる場合、どのようにすれば良いのでしょうか。不勉強で申し訳ありません。

回答No.2

pasocom

作りたいボタンが何をするボタンなのかにもよりますが、単に別ページへのリンクであるなら、
<a href="linkpage.html"><img src="filename.jpg"></a>フォローする
と書けば良いだけでしょう。
ボタン画像（filename.jpg）がすごく大きかったり、テキスト（フォローする）が長い文章だとページの右端で折り返されたり、テキストが改行になっちゃいますが、それほどでなければ上記で充分です。

補足

ページリンクではなく、<input～を使用して値を返すものです。
input type="image"だと画像扱いになるので背景は画像に出来るのですが、valueで指定した文字は画像が表示できなかったときのためのものなので、反映されません。input type="submit"だと、画像をsrcで指定しても表示されなくなり、上手くいきませんでした。
分かりにくい説明で申し訳ありません。よろしくお願い致します。

回答No.1

ORUKA1951

HTMLが、単なるリンクですか?、ナビゲーションリストのひとつですか?
<p>
　<a href="">フォローする</a>
</p>
それとも
<input type="button" value="フォローする">
それとも
<div nav">
　<li><a href="">フォローする</a></li>
　<li><a href="">フォローする</a></li>
　<li><a href="">フォローする</a></li>
</div>
どれでもよいですが・・・・・