Advanced Search

usable drupal contact form

/ Published in: CSS
Save to your folder(s)
highlights on active state. uses css gradients

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. input[type="text"] { width: 400px; }
  2. textarea { width: 600px; height: 275px; }
  3. label { color: #989898; }
  4. input, textarea { background-color: rgba(115, 115, 115, 1); border: 5px solid rgba(122, 192, 0, 0.15); padding: 10px; color: #4b4b4b; -webkit-border-radius: 5px; }
  5.  
  6.  
  7.  
  8.  
  9. input:focus, textarea:focus { border: 5px solid #9E36F2; background-color: rgba(255, 255, 255, 1); }
  10.  
  11.  
  12.  
  13.  
  14. input[type="submit"] { border: none; cursor: pointer; color: #fff; padding: 5px 36px 8px 36px; -webkit-border-radius: 10px; -moz-border-radius: 10px; -webkit-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.4); -moz-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.6); border-bottom: 1px solid rgba(0, 0, 0, 0.4); border-top: 1px solid rgba(255, 255, 255, 0.6);
  15. background: -webkit-gradient(
  16. linear,
  17. left bottom,
  18. left top,
  19. color-stop(0.23, #989898),
  20. color-stop(0.62, #dddddd)
  21. );
  22. background: -moz-linear-gradient(
  23. center bottom,
  24. #989898 23%,
  25. #dddddd 62%
  26. );
  27. }
  28.  
  29.  
  30.  
  31.  
  32. input[type="submit"]:hover { color: #fff; border-bottom: 1px solid rgba(0, 0, 0, 0.4); background-color: #9E36F2;
  33. background: -webkit-gradient(
  34. linear,
  35. left bottom,
  36. left top,
  37. color-stop(0.23, #521C7C),
  38. color-stop(0.62, #9E36F2)
  39. );
  40. background: -moz-linear-gradient(
  41. center bottom,
  42. #521C7C 23%,
  43. #9E36F2 62%
  44. );
  45. }
  46. input[type="submit"]:active { top: 1px; }

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.