Button With ASCII Character Using CSS3

Submitted by alpha_luna on Sunday, August 2, 2015 - 12:43.

Language

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

.btn_style { display: inline-block; white-space: nowrap; background-color: #ddd; background-image: -webkit-gradient(linear, left top, left bottom, from(#09F), to(#09F)); background-image: -webkit-linear-gradient(top, #1aebdf, chocolate); background-image: -moz-linear-gradient(top, #0095DD, #0052A4); background-image: -ms-linear-gradient(top, #0095DD, #0052A4); background-image: -o-linear-gradient(top, #0095DD, #0052A4); background-image: linear-gradient(top, #0095DD, #0052A4); border: 1px groove blue; padding: 0 1.5em; margin: 0.5em; font: bold 1em/2em Arial, Helvetica; text-decoration: none; color: #FFF; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; text-align: center; } .btn_style:hover { color:chocolate; border: 1px groove red; background-color: #1aebdf; background-image: -webkit-gradient(linear, left top, left bottom, from(#1aebdf), to(#1aebdf)); background-image: -webkit-linear-gradient(top, #1aebdf, #1aebdf); background-image: -moz-linear-gradient(top, #1aebdf, #1aebdf); background-image: -ms-linear-gradient(top, #1aebdf, #1aebdf); background-image: -o-linear-gradient(top, #1aebdf, #1aebdf); background-image: linear-gradient(top, #1aebdf, #1aebdf); } .btn_style:before { background: #ccc; background: rgba(0,0,0,.1); float: left; width: 1em; text-align: center; font-size: 1.5em; margin: 0 1em 0 -1em; padding: 0 .2em; -moz-box-shadow: 1px 0 0 rgba(0,0,0,.5), 2px 0 0 rgba(255,255,255,.5); -webkit-box-shadow: 1px 0 0 rgba(0,0,0,.5), 2px 0 0 rgba(255,255,255,.5); box-shadow: 1px 0 0 rgba(0,0,0,.5), 2px 0 0 rgba(255,255,255,.5); -moz-border-radius: .15em 0 0 .15em; -webkit-border-radius: .15em 0 0 .15em; border-radius: .15em 0 0 .15em; pointer-events: none; }

For Button - ASCII Character

/* for the icons */ .add:before { content: "\271A"; } .edit:before { content: "\270E"; } .delete:before { content: "\2718"; } .save:before { content: "\2714"; } .email:before { content: "\2709"; }

For HTML Code

CSS3 Button

Button Add Edit Delete Save
Button Button Add Button Edit Button Delete Button Save Button Email

Full Source Code

CSS3 Button

CSS3 Button

Button Add Edit Delete Save
Button Button Add Button Edit Button Delete Button Save Button Email
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

Add new comment

About text formats
  • 129 views