Button With ASCII Character Using CSS3

Submitted by alpha_luna on Sunday, August 2, 2015 - 12:43.
Language
HTML/CSS

Good Day!!!

In this tutorial, we are going to learn How To Make Button With ASCII Character Using CSS3. You can used it for the admin panel which is the add, edit, delete, save and mail. In this project we are not using Glyphicons of Bootsrap, Icon or Image instead we will use ASCII Character Using CSS3. It will display the corresponding symbol.

Directions:

For Button - Design

  1. .btn_style {
  2.         display: inline-block;
  3.         white-space: nowrap;
  4.         background-color: #ddd;
  5.         background-image: -webkit-gradient(linear, left top, left bottom, from(#09F), to(#09F));
  6.         background-image: -webkit-linear-gradient(top, #1aebdf, chocolate);
  7.         background-image: -moz-linear-gradient(top, #0095DD, #0052A4);
  8.         background-image: -ms-linear-gradient(top, #0095DD, #0052A4);
  9.         background-image: -o-linear-gradient(top, #0095DD, #0052A4);
  10.         background-image: linear-gradient(top, #0095DD, #0052A4);
  11.         border: 1px groove blue;
  12.         padding: 0 1.5em;
  13.         margin: 0.5em;
  14.         font: bold 1em/2em Arial, Helvetica;
  15.         text-decoration: none;
  16.         color: #FFF;
  17.         -moz-border-radius: 5px;
  18.         -webkit-border-radius: 5px;
  19.         border-radius: 5px;
  20.         text-align: center;
  21. }
  22.  
  23. .btn_style:hover {
  24.         color:chocolate;
  25.         border: 1px groove red;
  26.         background-color: #1aebdf;
  27.         background-image: -webkit-gradient(linear, left top, left bottom, from(#1aebdf), to(#1aebdf));
  28.         background-image: -webkit-linear-gradient(top, #1aebdf, #1aebdf);
  29.         background-image: -moz-linear-gradient(top, #1aebdf, #1aebdf);
  30.         background-image: -ms-linear-gradient(top, #1aebdf, #1aebdf);
  31.         background-image: -o-linear-gradient(top, #1aebdf, #1aebdf);
  32.         background-image: linear-gradient(top, #1aebdf, #1aebdf);
  33. }
  34.  
  35. .btn_style:before {
  36.         background: #ccc;
  37.         background: rgba(0,0,0,.1);
  38.         float: left;
  39.         width: 1em;
  40.         text-align: center;
  41.         font-size: 1.5em;
  42.         margin: 0 1em 0 -1em;
  43.         padding: 0 .2em;
  44.         -moz-box-shadow: 1px 0 0 rgba(0,0,0,.5), 2px 0 0 rgba(255,255,255,.5);
  45.         -webkit-box-shadow: 1px 0 0 rgba(0,0,0,.5), 2px 0 0 rgba(255,255,255,.5);
  46.         box-shadow: 1px 0 0 rgba(0,0,0,.5), 2px 0 0 rgba(255,255,255,.5);
  47.         -moz-border-radius: .15em 0 0 .15em;
  48.         -webkit-border-radius: .15em 0 0 .15em;
  49.         border-radius: .15em 0 0 .15em;
  50.         pointer-events: none;
  51. }

For Button - ASCII Character

  1. /* for the icons */
  2.  
  3. .add:before {
  4.         content: "\271A";
  5. }
  6.  
  7. .edit:before {
  8.         content: "\270E";
  9. }
  10.  
  11. .delete:before {
  12.         content: "\2718";
  13. }
  14.  
  15. .save:before {
  16.         content: "\2714";
  17. }
  18.  
  19. .email:before {
  20.         content: "\2709";
  21. }

For HTML Code

  1. <div align="center">
  2. <table border="1" class="table_style">
  3.         <tr>
  4.                 <td colspan="6">
  5.                         <h1>
  6.                                 CSS3 Button
  7.                         </h1>
  8.                 </td>
  9.         </tr>
  10.         <tr>
  11.                 <td>
  12.                         <a href="#" class="btn_style">Button</a>
  13.                 </td>
  14.                 <td>
  15.                         <a href="#" class="btn_style add">Add</a>
  16.                 </td>
  17.                 <td>
  18.                         <a href="#" class="btn_style edit">Edit</a>
  19.                 </td>
  20.                 <td>
  21.                         <a href="#" class="btn_style delete">Delete</a>
  22.                 </td>
  23.                 <td>
  24.                         <a href="#" class="btn_style save">Save</a>
  25.                 </td>
  26.                 <td>
  27.                         <a href="" class="btn_style email">Email</a>
  28.                 </td>
  29.         </tr>
  30.         <tr>
  31.                 <td>
  32.                         <span>
  33.                                 Button
  34.                         </span>
  35.                 </td>
  36.                 <td>
  37.                         <span>
  38.                                 Button Add
  39.                         </span>
  40.                 </td>
  41.                 <td>
  42.                         <span>
  43.                                 Button Edit
  44.                         </span>
  45.                 </td>
  46.                 <td>
  47.                         <span>
  48.                                 Button Delete
  49.                         </span>
  50.                 </td>
  51.                 <td>
  52.                         <span>
  53.                                 Button Save
  54.                         </span>
  55.                 </td>
  56.                 <td>
  57.                         <span>
  58.                                 Button Email
  59.                         </span>
  60.                 </td>
  61.         </tr>
  63. </div>

Full Source Code

  1. <!DOCTYPE html>
  4. <title>CSS3 Button</title>
  5. <style type="text/css">
  6. .btn_style {
  7.         display: inline-block;
  8.         white-space: nowrap;
  9.         background-color: #ddd;
  10.         background-image: -webkit-gradient(linear, left top, left bottom, from(#09F), to(#09F));
  11.         background-image: -webkit-linear-gradient(top, #1aebdf, chocolate);
  12.         background-image: -moz-linear-gradient(top, #0095DD, #0052A4);
  13.         background-image: -ms-linear-gradient(top, #0095DD, #0052A4);
  14.         background-image: -o-linear-gradient(top, #0095DD, #0052A4);
  15.         background-image: linear-gradient(top, #0095DD, #0052A4);
  16.         border: 1px groove blue;
  17.         padding: 0 1.5em;
  18.         margin: 0.5em;
  19.         font: bold 1em/2em Arial, Helvetica;
  20.         text-decoration: none;
  21.         color: #FFF;
  22.         -moz-border-radius: 5px;
  23.         -webkit-border-radius: 5px;
  24.         border-radius: 5px;
  25.         text-align: center;
  26. }
  27.  
  28. .btn_style:hover {
  29.         color:chocolate;
  30.         border: 1px groove red;
  31.         background-color: #1aebdf;
  32.         background-image: -webkit-gradient(linear, left top, left bottom, from(#1aebdf), to(#1aebdf));
  33.         background-image: -webkit-linear-gradient(top, #1aebdf, #1aebdf);
  34.         background-image: -moz-linear-gradient(top, #1aebdf, #1aebdf);
  35.         background-image: -ms-linear-gradient(top, #1aebdf, #1aebdf);
  36.         background-image: -o-linear-gradient(top, #1aebdf, #1aebdf);
  37.         background-image: linear-gradient(top, #1aebdf, #1aebdf);
  38. }
  39.  
  40. .btn_style:before {
  41.         background: #ccc;
  42.         background: rgba(0,0,0,.1);
  43.         float: left;
  44.         width: 1em;
  45.         text-align: center;
  46.         font-size: 1.5em;
  47.         margin: 0 1em 0 -1em;
  48.         padding: 0 .2em;
  49.         -moz-box-shadow: 1px 0 0 rgba(0,0,0,.5), 2px 0 0 rgba(255,255,255,.5);
  50.         -webkit-box-shadow: 1px 0 0 rgba(0,0,0,.5), 2px 0 0 rgba(255,255,255,.5);
  51.         box-shadow: 1px 0 0 rgba(0,0,0,.5), 2px 0 0 rgba(255,255,255,.5);
  52.         -moz-border-radius: .15em 0 0 .15em;
  53.         -webkit-border-radius: .15em 0 0 .15em;
  54.         border-radius: .15em 0 0 .15em;
  55.         pointer-events: none;
  56. }
  57.  
  58. .table_style {
  59.         text-align:center;
  60.         border:3px groove #CCC;
  61. }
  62.  
  63. span {
  64.         color:red;
  65.         font-weight:bold;
  66.         font-size:20px;
  67. }
  68.  
  69. h1 {
  70.         color:blue;
  71. }
  72.  
  73. /* for the icons */
  74.  
  75. .add:before {
  76.         content: "\271A";
  77. }
  78.  
  79. .edit:before {
  80.         content: "\270E";
  81. }
  82.  
  83. .delete:before {
  84.         content: "\2718";
  85. }
  86.  
  87. .save:before {
  88.         content: "\2714";
  89. }
  90.  
  91. .email:before {
  92.         content: "\2709";
  93. }
  95. </head>
  97. <div align="center">
  98. <table border="1" class="table_style">
  99.         <tr>
  100.                 <td colspan="6">
  101.                         <h1>
  102.                                 CSS3 Button
  103.                         </h1>
  104.                 </td>
  105.         </tr>
  106.         <tr>
  107.                 <td>
  108.                         <a href="#" class="btn_style">Button</a>
  109.                 </td>
  110.                 <td>
  111.                         <a href="#" class="btn_style add">Add</a>
  112.                 </td>
  113.                 <td>
  114.                         <a href="#" class="btn_style edit">Edit</a>
  115.                 </td>
  116.                 <td>
  117.                         <a href="#" class="btn_style delete">Delete</a>
  118.                 </td>
  119.                 <td>
  120.                         <a href="#" class="btn_style save">Save</a>
  121.                 </td>
  122.                 <td>
  123.                         <a href="" class="btn_style email">Email</a>
  124.                 </td>
  125.         </tr>
  126.         <tr>
  127.                 <td>
  128.                         <span>
  129.                                 Button
  130.                         </span>
  131.                 </td>
  132.                 <td>
  133.                         <span>
  134.                                 Button Add
  135.                         </span>
  136.                 </td>
  137.                 <td>
  138.                         <span>
  139.                                 Button Edit
  140.                         </span>
  141.                 </td>
  142.                 <td>
  143.                         <span>
  144.                                 Button Delete
  145.                         </span>
  146.                 </td>
  147.                 <td>
  148.                         <span>
  149.                                 Button Save
  150.                         </span>
  151.                 </td>
  152.                 <td>
  153.                         <span>
  154.                                 Button Email
  155.                         </span>
  156.                 </td>
  157.         </tr>
  159. </div>
  160. </body>
  161. </html>
So what can you say about this work? Share your thoughts in the comment section below or email me at [email protected]. Practice Coding. Thank you.

Note: Due to the size or complexity of this submission, the author has submitted it as a .zip file to shorten your download time. After downloading it, you will need a program like Winzip to decompress it.

Virus note: All files are scanned once-a-day by SourceCodester.com for viruses, but new viruses come out every day, so no prevention program can catch 100% of them.

FOR YOUR OWN SAFETY, PLEASE:

1. Re-scan downloaded files using your personal virus checker before using it.
2. NEVER, EVER run compiled files (.exe's, .ocx's, .dll's etc.)--only run source code.

Tags
Button
Display ASCII value for a character

Add new comment

About text formats
  • 170 views