CSS3 Button Generator

showcase : detail

background

border / padding

  • px
  • px
  • px
  • px

drop shadow

  • px
  • px
  • px

inner shadow

  • px
  • px
  • px

text font

  • px

text shadow 1

  • px
  • px
  • px

text shadow 2

  • px
  • px
  • px
save+share
このエントリーをはてなブックマークに追加

HTML CODE

CSS CODE

button.css3button {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 25px;
	color: #123d54;
	padding: 23px 30px;
	background: -webkit-gradient(
		linear, left top, left bottom,
		from(#f50c0c),
		color-stop(0.45, #ffffff),
		color-stop(0.95, #f00505),
		color-stop(0.42, #ffffff),
		to(#fc0000));
	background: linear-gradient(
		top,
		#f50c0c 0%,
		#ffffff 45%,
		#f00505 95%,
		#ffffff 42%,
		#fc0000);
	border-radius: 17px;
	border: 2px solid #4d4d4d;
	box-shadow:
		-4px 5px 7px rgba(000,000,000,1),
		inset -1px 25px 13px rgba(250,159,003,1);
	text-shadow:
		0px 2px 2px rgba(000,000,000,0.7),
		-3px 0px 0px rgba(168,168,168,0.3);
}