CSS3路 ボタンを 作れば カルサムするように 万たち 数 ある. IE7,8でも あまり 表示 シルゲは 中 出るように すれば 実戦で 使う 数 ある. CSS3 ボタンだけ 集めておいた ブログ 文度 あったよ.

ヨトン, この頃 ワードプレスで 製氷機 販売 ウェブサイトを 作って あるのに, Underscoresという ワードプレス テーマ 製作用 テーマで 出発した. Underscores増えた ワードプレス 製作社である オートマチックで 提供する テーマだ. テーマ 作り 楽にしなさいと 提供する ことだ. テーマ 作り 楽ならば 人々が 良質の テーマを 多く 万たち ことで, それでは ワードプレス 生態系が ふんだんになって 何 そんな ことだ.

ヨトン, これ テーマに CSS3 ボタンが 大丈夫だったよ. ところが paddingこれ あまり 広くて まどろみ 減らした. paddingこれ 多く 入って行くように して たければ big-button クラスを 付ければ なる. 私が 手ちょっと 本 ことだ.

そして 元々 テーマでは a タグで ボタンを 万たち 数は ない. 少し 手入れした. a タグに css-button クラスを 付ければ a タグも ボタンが なる. 内 ブログ 共有 ボタンに 使おうと 掻いて来て 見たが, 作動を 寝る する ガール 見たら 使うに値する. こういう 模様で 具現される.

コードは 下.

/* button */
a.css-button,
a.css-button:link,
a.css-button:hover,
a.css-button:active,
a.css-button:visited {
	color: black;
	text-decoration: none;
}
a.css-button,
button,
input,
select,
textarea {
	font-size: 100%; /* Corrects font size not being inherited in all browsers */
	margin: 0; /* Addresses margins set differently in IE6/7, F3/4, S5, Chrome */
	vertical-align: baseline; /* Improves appearance and consistency in all browsers */
	*vertical-align: middle; /* Improves appearance and consistency in all browsers */
}
a.css-button,
button,
input {
	line-height: normal; /* Addresses FF3/4 setting line-height using !important in the UA stylesheet */
	*overflow: visible;  /* Corrects inner spacing displayed oddly in IE6/7 */
}
a.css-button,
button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
	border: 1px solid #ccc;
	border-color: #ccc #ccc #bbb #ccc;
	border-radius: 3px;
	background: #e6e6e6;
	-webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,0.5), inset 0 15px 17px rgba(255,255,255,0.5), inset 0 -5px 12px rgba(0,0,0,0.05);
	-moz-box-shadow: inset 0 1px 0 rgba(255,255,255,0.5), inset 0 15px 17px rgba(255,255,255,0.5), inset 0 -5px 12px rgba(0,0,0,0.05);
	box-shadow: inset 0 1px 0 rgba(255,255,255,0.5), inset 0 15px 17px rgba(255,255,255,0.5), inset 0 -5px 12px rgba(0,0,0,0.05);
	color: rgba(0,0,0,.8);
	cursor: pointer; /* Improves usability and consistency of cursor style between image-type 'input' and others */
	-webkit-appearance: button; /* Corrects inability to style clickable 'input' types in iOS */
	font-size: 12px;
	line-height: 1;
	padding: 3px 10px;
	text-shadow: 0 1px 0 rgba(255,255,255,.8);
}
a.css-button.big-button,
button.big-button,
html input[type="button"].big-button,
input[type="reset"].big-button,
input[type="submit"].big-button {
	padding: 1em 1.5em;
}
a.css-button:hover,
button:hover,
html input[type="button"]:hover,
input[type="reset"]:hover,
input[type="submit"]:hover {
	border-color: #ccc #bbb #aaa #bbb;
	-webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,0.8), inset 0 15px 17px rgba(255,255,255,0.8), inset 0 -5px 12px rgba(0,0,0,0.02);
	-moz-box-shadow: inset 0 1px 0 rgba(255,255,255,0.8), inset 0 15px 17px rgba(255,255,255,0.8), inset 0 -5px 12px rgba(0,0,0,0.02);
	box-shadow: inset 0 1px 0 rgba(255,255,255,0.8), inset 0 15px 17px rgba(255,255,255,0.8), inset 0 -5px 12px rgba(0,0,0,0.02);
}
a.css-button:focus,
button:focus,
html input[type="button"]:focus,
input[type="reset"]:focus,
input[type="submit"]:focus,
button:active,
html input[type="button"]:active,
input[type="reset"]:active,
input[type="submit"]:active {
	border-color: #aaa #bbb #bbb #bbb;
	-webkit-box-shadow: inset 0 -1px 0 rgba(255,255,255,0.5), inset 0 2px 5px rgba(0,0,0,0.15);
	-moz-box-shadow: inset 0 -1px 0 rgba(255,255,255,0.5), inset 0 2px 5px rgba(0,0,0,0.15);
	box-shadow: inset 0 -1px 0 rgba(255,255,255,0.5), inset 0 2px 5px rgba(0,0,0,0.15);
}

- コメント機能はありません。コメントの代わりに[email protected]にメールを送ってください。