勉強したことのメモ

webプログラマが勉強したことのメモ。

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

   

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 />

 

■サンプル

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

 

■その他

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

 - CSS

  関連記事

LINE風のふきだしデザイン

LINE風のふきだしデザインでページを作ってほしいと言われた。 CSSはあまり理 ...

firebugでCSSパスをコピー

要素を調査⇒右クリック⇒CSSパスをコピーできる。 jQueryでのセレクタ指定 ...

スマホサイトでviewportを指定しても横スクロールバーが表示される

スマホ用のサイトでviewportが指定されており、widthも100%になって ...

要素の表示or非表示

今まで要素の表示or非表示をCSSで操作する際、 display:none; / ...

Bootstrapを使用したデザインテンプレート

Bootstrapを使用してもデザインのセンス無いし、 と思っていいものはないか ...

デザイン等のカラーの組み合わせを簡単に決める方法

サイト作成時にメインカラーとそれにマッチする組み合わせを考える必要があった。デザ ...

CSSのopacity

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

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

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

可変要素内の文字を丸める

可変の要素内の文字を丸めたかった。いつもであればPHPのmb_strimwidt ...

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

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