formのsubmitをボタンを無くしたり画像をつけたりCSSで装飾

2014/09/11

aタグになっていたところをsubmitボタンに変えてほしいという修正依頼があった。ページ遷移とか機能的な部分は大丈夫なんだけど、デザイン部分が分からなかったのでメモ。

■ソース

<style>
.test{
	border: medium none;
	cursor: pointer;
	background: #fff;
}
.test2{
	border: 2px solid #999;
	cursor: pointer;
	background: #fff;
}
.test3{
	background:url('./submitBtn.png');
	border: medium none;
	cursor: pointer;
	width: 180px;
	height: 36px;
}
</style>

<input type="submit" value="送信"><br /><br />
<input type="submit" value="送信" class="test"><br /><br />
<input type="submit" value="送信" class="test2"><br /><br />
<input type="submit" value="送信" class="test3"><br /><br />

<style>

.test{

border: medium none;

cursor: pointer;

background: #fff;

}

.test2{

border: 2px solid #999;

cursor: pointer;

background: #fff;

}

.test3{

background:url('./submitBtn.png');

border: medium none;

cursor: pointer;

width: 180px;

height: 36px;

}

</style>

■サンプル

http://sample.taitan916.info/submitCss/

■その他

ボタンの枠みたいな部分はborderで、背景はbackgroudで変更できるらしい。あと画像をつける場合は縦横を指定しとかないと文字数の関係で途切れちゃったりするので注意する。

- CSS

: スマホ用の有料デザインテンプレが9月内は無料でもらえた

envatomarketでスマホ用の有料デザインテンプレートが2014年9月内に ...

: CSSのopacity

opacityというプロパティを業務中に見かけたのでメモ。透明度を指定するもの ...

: CSSで1つの要素に複数classを設定して画像を入れ替える

メニューリンクで通常時の画像、マウスオーバー時の画像、アクティブ時の画像をそれぞ ...

: ダウンロード無しで外部ファイル呼び出し

■jQuery http://scriptsrc.net/ ■bootstrap ...

: CSSでfloatの解除

CSSでfloatがかかっているところを解除したかったけど、やり方が分からなか ...

: 上部に固定されたヘッダーメニューの作成

■やりたい事ページスクロールしても上部に固定されたヘッダメニューの作る &nb ...

: スクロールしても追尾する要素をCSSで作成

コンテンツ内をスクロールしても追尾してくる要素を作成したかった。以前にMeeka ...

: レスポンシブ対応で右カラムのコンテンツを上に表示させたい

レスポンシブ対応サイトの簡易なコーディングをする経験があった。何も考えずにHTM ...

: CSSのセレクタを一瞬で拾ってくる

↓↓こちらのサイト様 http://css.miugle.info/ 左側のテキ ...

: jQueryとCSSの連携

$(function(){ $("#change_small").click(f ...

PREV: 画面遷移図を簡単に作れるサイト
NEXT: jQueryでセレクトメニューにcheckedをつける

formのsubmitをボタンを無くしたり画像をつけたりCSSで装飾

関連記事