7

ハイパーリンクをテキスト付きのボタンのように見せることはできますか？

コードでハイパーリンクボタンを作成できます。

<a href="..."> <img src="button.png" width="100" height="50" alt="Some text"></img> </a>

しかし、ボタンの中央にテキストも必要です。

ありがとう。

4

3 に答える 3

4

あなたが何を望んでいるかを正確に知らずに、次のマークアップを想定することをお勧めします。

<a href="#"><img src="path/to/image.png" /><span>Some text</span></a>

a {
    position: relative;
    display: inline-block;
}

a span {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -1em;
    margin-left: -50%;
    width: 100%;
    height: 2em;
    color: #f90;
    background-color: rgba(0,0,0,0.5);
}​

JS フィドルのデモ。

于 2012-07-05T15:40:24.630 に答える
3

ボタンを背景として設定することで可能です：

<a href="..." style="text-align:center; background: url('button.png'); width: 100px; height: 50px;">Your text</a>

ただし、背景画像のあるボタンは避けようとします (奇妙な形でない限り)。代わりに、CSS3 を使用してみます。

于 2012-07-05T15:37:32.740 に答える
0

bootstrap や Flat ui などの UI フレームワークを使用できます。

<a href="#" class="btn btn-primary"> Click Me</a>
于 2015-08-05T17:19:34.603 に答える