Skip to main content

Button With ASCII Character Using CSS3

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.

Add new comment

CAPTCHA
This question is for testing whether or not you are a human visitor and to prevent automated spam submissions.