/*รูปแบบของ button ที่แสดงในหน้า แนะนำเว็บสร้าง button .. แต่ละตัวนำมาจากตัวอย่างจริงของเว็บ*/
/*ใช้กับ buttonmaker.html*/
#link1 {
   background-image: -webkit-linear-gradient(top, rgba(255,162,2,1) 0%,rgba(255,112,2,1) 100%);
   background-image:    -moz-linear-gradient(top, rgba(255,162,2,1) 0%,rgba(255,112,2,1) 100%);
   background-image:     -ms-linear-gradient(top, rgba(255,162,2,1) 0%,rgba(255,112,2,1) 100%);
   background-image:      -o-linear-gradient(top, rgba(255,162,2,1) 0%,rgba(255,112,2,1) 100%);
   background-image:         linear-gradient(top, rgba(255,162,2,1) 0%,rgba(255,112,2,1) 100%);
   -webkit-box-shadow: 0px 1px 0px 0px rgba(255,255,255,0.57)inset, 0px 20px 0px 0px rgba(255,255,255,0.18)inset, 0px 5px 0px 0px rgba(213,96,0,1), 0px -1px 0px 0px rgba(255,255,255,0.07)inset, 0px 5px 2px 0px rgba(0,0,0,0.46);
      -moz-box-shadow: 0px 1px 0px 0px rgba(255,255,255,0.57)inset, 0px 20px 0px 0px rgba(255,255,255,0.18)inset, 0px 5px 0px 0px rgba(213,96,0,1), 0px -1px 0px 0px rgba(255,255,255,0.07)inset, 0px 5px 2px 0px rgba(0,0,0,0.46);
           box-shadow: 0px 1px 0px 0px rgba(255,255,255,0.57)inset, 0px 20px 0px 0px rgba(255,255,255,0.18)inset, 0px 5px 0px 0px rgba(213,96,0,1), 0px -1px 0px 0px rgba(255,255,255,0.07)inset, 0px 5px 2px 0px rgba(0,0,0,0.46);
   border: solid 1px rgba(255,120,2,1);
   -webkit-border-radius: 4px;
      -moz-border-radius: 4px;
           border-radius: 4px;
   padding: 10px 30px 10px 30px;
   display: inline-block;
   -webkit-transition: all 0.1s linear;
      -moz-transition: all 0.1s linear;
           transition: all 0.1s linear;
   font-size: 15px;
   color: rgba(255,255,255,1);
   font-weight: bold;
   text-shadow: 0px -1px 0px rgba(0,0,0,0.53)
}
#link1:hover {
   background-image: -webkit-linear-gradient(top, rgba(255,175,3,1) 0%,rgba(255,112,2,1) 100%);
   background-image:    -moz-linear-gradient(top, rgba(255,175,3,1) 0%,rgba(255,112,2,1) 100%);
   background-image:     -ms-linear-gradient(top, rgba(255,175,3,1) 0%,rgba(255,112,2,1) 100%);
   background-image:      -o-linear-gradient(top, rgba(255,175,3,1) 0%,rgba(255,112,2,1) 100%);
   background-image:         linear-gradient(top, rgba(255,175,3,1) 0%,rgba(255,112,2,1) 100%);
}
#link1:active {
   -webkit-box-shadow: 0px 1px 0px 0px rgba(255,255,255,0.57)inset, 0px 20px 0px 0px rgba(255,255,255,0.18)inset, 0px 1px 0px 0px rgba(213,96,0,1), 0px -1px 0px 0px rgba(255,255,255,0.07)inset, 0px 1px 2px 0px rgba(0,0,0,0.1);
      -moz-box-shadow: 0px 1px 0px 0px rgba(255,255,255,0.57)inset, 0px 20px 0px 0px rgba(255,255,255,0.18)inset, 0px 1px 0px 0px rgba(213,96,0,1), 0px -1px 0px 0px rgba(255,255,255,0.07)inset, 0px 1px 2px 0px rgba(0,0,0,0.1);
           box-shadow: 0px 1px 0px 0px rgba(255,255,255,0.57)inset, 0px 20px 0px 0px rgba(255,255,255,0.18)inset, 0px 1px 0px 0px rgba(213,96,0,1), 0px -1px 0px 0px rgba(255,255,255,0.07)inset, 0px 1px 2px 0px rgba(0,0,0,0.1);
   -webkit-transform: translateY(3px);
      -moz-transform: translateY(3px);
           transform: translateY(3px);
}
#link2 {
   border-top: 1px solid #96d1f8;
   background: #65a9d7;
   background: -webkit-gradient(linear, left top, left bottom, from(#3e779d), to(#65a9d7));
   background: -webkit-linear-gradient(top, #3e779d, #65a9d7);
   background: -moz-linear-gradient(top, #3e779d, #65a9d7);
   background: -ms-linear-gradient(top, #3e779d, #65a9d7);
   background: -o-linear-gradient(top, #3e779d, #65a9d7);
   padding: 7px 14px;
   -webkit-border-radius: 40px;
   -moz-border-radius: 40px;
   border-radius: 40px;
   -webkit-box-shadow: rgba(0,0,0,1) 0 1px 0;
   -moz-box-shadow: rgba(0,0,0,1) 0 1px 0;
   box-shadow: rgba(0,0,0,1) 0 1px 0;
   text-shadow: rgba(0,0,0,.4) 0 1px 0;
   color: white;
   font-size: 18px;
   font-family: Georgia, Serif;
   text-decoration: none;
   vertical-align: middle;
}
#link2:hover {
   border-top-color: #d1ebff;
   background: #d1ebff;
   color: #4ad5ff;
}
#link2:active {
   border-top-color: #1b435e;
   background: #1b435e;
}
#link3 {
  background: #eef590;
  background-image: -webkit-linear-gradient(top, #eef590, #6a9114);
  background-image: -moz-linear-gradient(top, #eef590, #6a9114);
  background-image: -ms-linear-gradient(top, #eef590, #6a9114);
  background-image: -o-linear-gradient(top, #eef590, #6a9114);
  background-image: linear-gradient(to bottom, #eef590, #6a9114);
  -webkit-border-radius: 28;
  -moz-border-radius: 28;
  border-radius: 28px;
  -webkit-box-shadow: 2px 4px 3px #666666;
  -moz-box-shadow: 2px 4px 3px #666666;
  box-shadow: 2px 4px 3px #666666;
  font-family: Arial;
  color: #ffffff;
  font-size: 20px;
  padding: 10px 20px 10px 20px;
  text-decoration: none;
}

#link3:hover {
  background: #ffffff;
  background-image: -webkit-linear-gradient(top, #ffffff, #6a9114);
  background-image: -moz-linear-gradient(top, #ffffff, #6a9114);
  background-image: -ms-linear-gradient(top, #ffffff, #6a9114);
  background-image: -o-linear-gradient(top, #ffffff, #6a9114);
  background-image: linear-gradient(to bottom, #ffffff, #6a9114);
  text-decoration: none;
}
#link4 {
	
-moz-box-shadow:inset 0px 1px 0px 0px #efdcfb;
	
-webkit-box-shadow:inset 0px 1px 0px 0px #efdcfb;
	
box-shadow:inset 0px 1px 0px 0px #efdcfb;
	
background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #dfbdfa), color-stop(1, #bc80ea));
	
background:-moz-linear-gradient(top, #dfbdfa 5%, #bc80ea 100%);
	
background:-webkit-linear-gradient(top, #dfbdfa 5%, #bc80ea 100%);
	
background:-o-linear-gradient(top, #dfbdfa 5%, #bc80ea 100%);
	
background:-ms-linear-gradient(top, #dfbdfa 5%, #bc80ea 100%);
	
background:linear-gradient(to bottom, #dfbdfa 5%, #bc80ea 100%);
	
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#dfbdfa', endColorstr='#bc80ea',GradientType=0);
	
background-color:#dfbdfa;
	
-moz-border-radius:6px;
	
-webkit-border-radius:6px;
	
border-radius:6px;
	border:1px solid #c584f3;
	
display:inline-block;
	
cursor:pointer;
	
color:#ffffff;
	
font-family:Arial;
	
font-size:15px;
	
font-weight:bold;
	
padding:6px 24px;
	
text-decoration:none;
	
text-shadow:0px 1px 0px #9752cc;

}

#link4:hover {
	
background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #bc80ea), color-stop(1, #dfbdfa));
	
background:-moz-linear-gradient(top, #bc80ea 5%, #dfbdfa 100%);
	
background:-webkit-linear-gradient(top, #bc80ea 5%, #dfbdfa 100%);
	
background:-o-linear-gradient(top, #bc80ea 5%, #dfbdfa 100%);
	
background:-ms-linear-gradient(top, #bc80ea 5%, #dfbdfa 100%);
	
background:linear-gradient(to bottom, #bc80ea 5%, #dfbdfa 100%);
	
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#bc80ea', endColorstr='#dfbdfa',GradientType=0);
	
background-color:#bc80ea;
}
.myButton:active {
	position:relative;
	top:1px;

}
#link5{
border-color:#8e6af5;border-width: 1px 1px 1px 15px;border-style: solid; -webkit-border-radius: 3px; -moz-border-radius: 3px;border-radius: 3px;font-size:12px;font-family:arial, helvetica, sans-serif; padding: 10px 10px 10px 10px; text-decoration:none; display:inline-block;text-shadow: -1px -1px 0 rgba(0,0,0,0.3);font-weight:bold; color: #FFFFFF;
 background-color: #B29AF8; background-image: -webkit-gradient(linear, left top, left bottom, from(#B29AF8), to(#9174ED));
 background-image: -webkit-linear-gradient(top, #B29AF8, #9174ED);
 background-image: -moz-linear-gradient(top, #B29AF8, #9174ED);
 background-image: -ms-linear-gradient(top, #B29AF8, #9174ED);
 background-image: -o-linear-gradient(top, #B29AF8, #9174ED);
 background-image: linear-gradient(to bottom, #B29AF8, #9174ED);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#B29AF8, endColorstr=#9174ED);
}

#link5:hover{
 border-top-color: #8E6AF5;border-right-color: #8E6AF5;border-bottom-color: #8e6af5;border-left-color: #8e6af5;border-width: 1px 15px 1px 1px;border-style: solid;
 background-color: #B29AF8; background-image: -webkit-gradient(linear, left top, left bottom, from(#B29AF8), to(#9174ED));
 background-image: -webkit-linear-gradient(top, #B29AF8, #9174ED);
 background-image: -moz-linear-gradient(top, #B29AF8, #9174ED);
 background-image: -ms-linear-gradient(top, #B29AF8, #9174ED);
 background-image: -o-linear-gradient(top, #B29AF8, #9174ED);
 background-image: linear-gradient(to bottom, #B29AF8, #9174ED);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#B29AF8, endColorstr=#9174ED);
}
#link6 {
   border: 1px solid #0a3c59;
   background: #3e779d;
   background: -webkit-gradient(linear, left top, left bottom, from(#65a9d7), to(#3e779d));
   background: -webkit-linear-gradient(top, #65a9d7, #3e779d);
   background: -moz-linear-gradient(top, #65a9d7, #3e779d);
   background: -ms-linear-gradient(top, #65a9d7, #3e779d);
   background: -o-linear-gradient(top, #65a9d7, #3e779d);
   background-image: -ms-linear-gradient(top, #65a9d7 0%, #3e779d 100%);
   padding: 10.5px 21px;
   -webkit-border-radius: 6px;
   -moz-border-radius: 6px;
   border-radius: 6px;
   -webkit-box-shadow: rgba(255,255,255,0.4) 0 1px 0, inset rgba(255,255,255,0.4) 0 1px 0;
   -moz-box-shadow: rgba(255,255,255,0.4) 0 1px 0, inset rgba(255,255,255,0.4) 0 1px 0;
   box-shadow: rgba(255,255,255,0.4) 0 1px 0, inset rgba(255,255,255,0.4) 0 1px 0;
   text-shadow: #7ea4bd 0 1px 0;
   color: #06426c;
   font-size: 19px;
   font-family: helvetica, serif;
   text-decoration: none;
   vertical-align: middle;
   }
#link6:hover {
   border: 1px solid #0a3c59;
   text-shadow: #1e4158 0 1px 0;
   background: #3e779d;
   background: -webkit-gradient(linear, left top, left bottom, from(#65a9d7), to(#3e779d));
   background: -webkit-linear-gradient(top, #65a9d7, #3e779d);
   background: -moz-linear-gradient(top, #65a9d7, #3e779d);
   background: -ms-linear-gradient(top, #65a9d7, #3e779d);
   background: -o-linear-gradient(top, #65a9d7, #3e779d);
   background-image: -ms-linear-gradient(top, #65a9d7 0%, #3e779d 100%);
   color: #fff;
   }
#link6:active {
   text-shadow: #1e4158 0 1px 0;
   border: 1px solid #0a3c59;
   background: #65a9d7;
   background: -webkit-gradient(linear, left top, left bottom, from(#3e779d), to(#3e779d));
   background: -webkit-linear-gradient(top, #3e779d, #65a9d7);
   background: -moz-linear-gradient(top, #3e779d, #65a9d7);
   background: -ms-linear-gradient(top, #3e779d, #65a9d7);
   background: -o-linear-gradient(top, #3e779d, #65a9d7);
   background-image: -ms-linear-gradient(top, #3e779d 0%, #65a9d7 100%);
   color: #fff;
   }