Make a button with text shadow - HTML CSS CSS Form

HTML CSS examples for CSS Form:input button text

  1. HOME
  2. HTML CSS
  3. CSS Form
  4. input button text

Description

Make a button with text shadow

Demo Code

ResultView the demo in separate window 

<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
 <head> 
  <meta content="text/html; charset=UTF-8" http-equiv="content-type"> 
  <style>

#post3 {<!--   w ww. ja v a2s.  c o  m-->
   background: #ffcf32; /* Old browsers */
   background: -moz-linear-gradient(top,  #ffcf32 0%, blue 50%, #f7df27 51%, #ffdf89 100%); /* FF3.6+ */
   background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffcf32), color-stop(50%,blue), color-stop(51%,#f7df27), color-stop(100%,#ffdf89)); /* Chrome,Safari4+ */
   background: -webkit-linear-gradient(top,  #ffcf32 0%,blue 50%,#f7df27 51%,#ffdf89 100%); /* Chrome10+,Safari5.1+ */
   background: -o-linear-gradient(top,  #ffcf32 0%,blue 50%,#f7df27 51%,#ffdf89 100%); /* Opera 11.10+ */
   background: -ms-linear-gradient(top,  #ffcf32 0%,blue 50%,#f7df27 51%,#ffdf89 100%); /* IE10+ */
   background: linear-gradient(to bottom,  #ffcf32 0%,blue 50%,#f7df27 51%,#ffdf89 100%); /* W3C */
   filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffcf32', endColorstr='#ffdf89',GradientType=0 ); /* IE6-9 */
   /*display: inline-block;*/
   border: 1px solid rgb(0, 0, 0);
   /*width: 290px;*/
   height: 45px;/*
   font-size: 150%;*/
   text-decoration: none;
   /*text-align: center;*/
   font-weight: bold;
   border-top-left-radius: 5px;
   border-top-right-radius: 5px;
   border-bottom-right-radius: 5px;
   border-bottom-left-radius: 5px;
   background-image: -webkit-linear-gradient(top, rgb(109, 179, 242) 0%, rgb(84, 163, 238) 50%, rgb(54, 144, 240) 51%, rgb(30, 105, 222) 100%);
   background-position: initial initial;
   background-repeat: initial initial;
   width: 300px;
   text-align: center;
}
span.center-content {
   display: inline-block;
   vertical-align: middle;
   line-height:45px;
}
#post3 a {
   color: #fff;
   font-size: 24px;
   letter-spacing: 2px;
   text-decoration: none;
   text-shadow: 2px 3px 7px #000000;
   text-transform: uppercase;
}

      </style> 
 </head> 
 <body> 
  <div id="post3"> 
   <span class="center-content"> <a href="#">Loren Ipsum</a> </span> 
  </div>  
 </body>
</html>

Related Tutorials