ホーム > Android | CSS | iPhone > CSS3でsubmitボタンとaリンクのデザイン共通化

CSS3でsubmitボタンとaリンクのデザイン共通化

スマートフォンサイトを制作中に、通常のリンクタグとformのsubmitボタンのデザインを共通化したい、というシチュエーションがあったので、メモ代わりに。
下図のようなデザイン統一を目指します。



まずは、ボタンのデザインをCSS3で定義します。
ここではgradient等の説明は省略します。
.button {
  background: #8fd324;
  background: -moz-linear-gradient(top, #b1e362 0%, #a2d847 50%, #8acb1f 50%, #7dbf0d 100%);
  background: -webkit-gradient(linear, 0 0, 0 100%, color-stop(0, #b1e362), color-stop(0.5, #a2d847), color-stop(0.5, #8acb1f), color-stop(1, #7dbf0d));
  border: 1px solid #5b9400;
  border-bottom: 1px solid #568a03;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  -moz-box-shadow: inset 0 1px 0 0 #c8eb8f;
  -webkit-box-shadow: inset 0 1px 0 0 #c8eb8f;
  box-shadow: inset 0 1px 0 0 #c8eb8f;
  color: #fff;
  font:16px "ヒラギノ角ゴ Pro W3",tahoma,arial;
  padding: 7px 0 8px 0;
  text-decoration: none;
  text-align: center;
  text-shadow: 0 -1px 1px #426b01;
  width: 200px;
}

.button:hover {
  background: #689b13;
  background: -moz-linear-gradient(top, #9ad055 0%, #8dc241 50%, #78b41b 50%, #6da70a 100%);
  background: -webkit-gradient(linear, 0 0, 0 100%, color-stop(0, #9ad055), color-stop(0.5, #8dc241), color-stop(0.5, #78b41b), color-stop(1, #6da70a));
  cursor: pointer;
}

.button:active {
  -moz-box-shadow: inset 0 0 10px 0 #2b430d, 0 1px 0 #fff;
  -webkit-box-shadow: inset 0 0 10px 0 #2b430d, 0 1px 0 #fff;
  box-shadow: inset 0 0 10px 0 #2b430d, 0 1px 0 #fff;
  cursor: pointer;
}

submitボタン用のclass定義をします。
-webkit-appearanceはSafariのCSS3拡張プロパティで、Sarfari用のインターフェースを実現しているものなので、ここでは切っておきます。
input内ではfont指定が外れることがあるので、改めて定義しておきます。
.btn_submit {
  -webkit-appearance: none;
  font:16px "ヒラギノ角ゴ Pro W3",tahoma,arial;
}

続いてaリンク用のclass定義。
borderの解釈がinputとは違うので、左右borderの2pxを引いておきます。
.btn_alink {
  width: 198px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
}


厳密に言うと、ブラウザによっては縦幅に若干誤差が出ます。
完全に同じになるのは、Google Chromeのみなので、Androidでは問題ないかと思います。


参考サイト:  スマートフォンサイトにてフォームボタンのコーディング時に覚えておきたいCSSプロパティ

コメント:0

コメントフォーム
入力した情報を記憶する

トラックバック:0

この記事のトラックバック URL
http://www.satoimo18.com/archives/142/trackback
トラックバックの送信元リスト
CSS3でsubmitボタンとaリンクのデザイン共通化 - Web Designing satoimo18+ より

ホーム > Android | CSS | iPhone > CSS3でsubmitボタンとaリンクのデザイン共通化

検索
フィード
メタ情報

ページの上部に戻る