Advertisement
Guest User

Untitled

a guest
Apr 16th, 2014
46
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 2.06 KB | None | 0 0
  1. <form id = "submit" method="get" action="">
  2. <input type="submit" name="action" value="Download" id="dlbutton"/>
  3. </form>
  4.  
  5. #dlbutton{
  6. background:#223445;
  7. color:#FFFFFF ;
  8. border: 1px solid #223445;
  9. border-radius: 18px
  10. -moz-border-radius: 5px
  11. display:inline-block;
  12. width: 20em;
  13. height: 5em;
  14. -webkit-font-smoothing: antialiased;
  15. }
  16.  
  17. <p><button class="clickable" id="clickable">Click me</button></p>
  18.  
  19. border-radius: 18px
  20. -moz-border-radius: 5px
  21.  
  22. border-radius: 18px;
  23. -moz-border-radius: 5px;
  24.  
  25. -webkit-border-radius: 5px;
  26.  
  27. // FIRST STYLE THE BUTTON
  28. input#bigbutton {
  29. width:500px;
  30. background: #3e9cbf; // the colour of the button
  31. padding: 8px 14px 10px; // apply some padding inside the button
  32. border:1px solid #3e9cbf; // required or the default border for the browser will appear
  33. cursor:pointer; // forces the cursor to change to a hand when the button is hovered
  34. // Style the text
  35. font-size:1.5em;
  36. font-family:Oswald, sans-serif;
  37. letter-spacing:.1em;
  38. text-shadow: 0 -1px 0px rgba(0, 0, 0, 0.3); // give the text a shadow
  39. color: #fff;
  40. /*use box-shadow to give the button some depth - see cssdemos.tupence.co.uk/box-shadow.htm#demo7 for more info on this technique*/
  41. -webkit-box-shadow: inset 0px 1px 0px #3e9cbf, 0px 5px 0px 0px #205c73, 0px 10px 5px #999;
  42. -moz-box-shadow: inset 0px 1px 0px #3e9cbf, 0px 5px 0px 0px #205c73, 0px 10px 5px #999;
  43. box-shadow: inset 0px 1px 0px #3e9cbf, 0px 5px 0px 0px #205c73, 0px 10px 5px #999;
  44. /*give the corners a small curve*/
  45. -moz-border-radius: 10px;
  46. -webkit-border-radius: 10px;
  47. border-radius: 10px;
  48. }
  49. // SET THE BUTTON'S HOVER AND FOCUS STATES
  50. input#bigbutton:hover, input#bigbutton:focus {
  51. color:#dfe7ea;
  52. /*reduce the size of the shadow to give a pushed effect*/
  53. -webkit-box-shadow: inset 0px 1px 0px #3e9cbf, 0px 2px 0px 0px #205c73, 0px 2px 5px #999;
  54. -moz-box-shadow: inset 0px 1px 0px #3e9cbf, 0px 2px 0px 0px #205c73, 0px 2px 5px #999;
  55. box-shadow: inset 0px 1px 0px #3e9cbf, 0px 2px 0px 0px #205c73, 0px 2px 5px #999;
  56. }
  57.  
  58. <input id="bigbutton" type="submit" value="Big Button That Needs Clicking" />
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement