Yvision.kzYvision.kz
kk
Разное
Разное
399 773 постов41 подписчиков
Всяко-разно
0
12:28, 12 мая 2010

Кнопка с помощью CSS3

Blog post image

Вторая запись за 5 минут, так как я увлекаюсь веб-дизайном и веб-разработками решил вам выложить одни урок который поможет вам создать кнопку с помощью стилей CSS3. Ссылка на исходные файлы и код приведены ниже.

 

  1. <!DOCTYPE html>
  2.  
  3. <html lang="en">
  4. <meta charset="utf-8">
  5. <title>CSS3 Buttons</title>
  6.  
  7. /* CUSTOM FONT */
  8. @font-face {
  9. font-family: 'EfonRegular';
  10. src: url('font/EFON-webfont.eot');
  11. src: local('EfonRegular'), url('font/EFON-webfont.woff') format('woff'), url('font/EFON-webfont.ttf') format('truetype'), url('font/EFON-webfont.svg#webfont') format('svg');
  12. font-weight: normal;
  13. font-style: normal;
  14. }
  15.  
  16. body {
  17. width: 400px;
  18. margin: 200px auto;
  19. background: #666;
  20. }
  21.  
  22. .button {
  23. width: 400px;
  24. height: 100px;
  25. line-height: 100px;
  26. color: white;
  27. text-decoration: none;
  28. font-size: 50px;
  29. font-family: helvetica, arial;
  30. font-weight: bold;
  31. display: block;
  32. text-align: center;
  33. position: relative;
  34.  
  35. /* BACKGROUND GRADIENTS */
  36. background: #014464;
  37. background: -moz-linear-gradient(top, #0D658E, #0C577A 50%, #014D71 51%, #003E5C);
  38. background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #0E658E), color-stop(.5, #0C577A), color-stop(.51, #014D71), to(#003E5C));
  39.  
  40. /* BORDER RADIUS */
  41. -moz-border-radius: 10px;
  42. -webkit-border-radius: 10px;
  43. border-radius: 10px;
  44.  
  45. border: 1px solid #368DBE;
  46. border-top: 1px solid #c3d6df;
  47.  
  48. /* TEXT SHADOW */
  49.  
  50. text-shadow: 1px 1px 1px black;
  51.  
  52. /* BOX SHADOW */
  53. -moz-box-shadow: 0 1px 3px black;
  54. -webkit-box-shadow: 0 1px 3px black;
  55. box-shadow: 0 1px 3px black;
  56. }
  57.  
  58. .button:hover {
  59. background: #014464;
  60. background: -moz-linear-gradient(top, #0c5f85, #0b5273 50%, #024869 51%, #003853);
  61. background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #0c5f85), color-stop(.5, #0b5273), color-stop(.51, #024869), to(#003853));
  62. }
  63.  
  64. /* FONT GLYPH (MOSTLY FOR FUN) */
  65. .button:before {
  66. font-family: EfonRegular;
  67. content: 'v';
  68. color: #09232F;
  69. font-size: 90px;
  70. float: left;
  71. margin-left: 35px;
  72. margin-right: -10px;
  73. text-shadow: 0 1px 0 #4190AF;
  74. }
  75.  
  76. </style>
  77. </head>
  78. <a href="#" class="button"> Follow Me </a>
  79. </body>
  80. </html>

 

Ссылка на исходные файлы: http://vital-school.ru/files/button.rar

0
353
0