CSS3 Action Buttons

CSS Action Buttons,it used for admin panel add edit delete save and mail .no need icon or image.one time  call a  CSS access to anywhere a action button and  change any color of button .it's very simple .. content: "\271A"; is   Add icon. 270E is edit icon it's is ASCII Character .it display corresponding  symbol



Button Css


.button
{
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, #0095DD, #ccc);
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 solid #777;
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;
}

Action icon CSS


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

Html


<a href="#" class="button">Button</a>
<a href="#" class="button add">Add</a>
<a href="#" class="button edit">Edit</a>
<a href="#" class="button delete">Delete</a>
<a href="#" class="button save">Save</a>
<a href="" class="button email">Send email</a>


source code


<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Css3 Button</title>
</head>
<style>

h2
{
font: bold 1.4em 'Lucida sans', 'Trebuchet MS', Tahoma, Arial;
color: #555;
}
.button
{
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, #0095DD, #ccc);
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 solid #777;
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;
}

.button:hover
{
background-color: #eee;
background-image: -webkit-gradient(linear, left top, left bottom, from(#fafafa), to(#ddd));
background-image: -webkit-linear-gradient(top, #48A4FF, #006CD9);
background-image: -moz-linear-gradient(top, #48A4FF, #006CD9);
background-image: -ms-linear-gradient(top, #48A4FF, #006CD9);
background-image: -o-linear-gradient(top, #48A4FF, #006CD9);
background-image: linear-gradient(top, #48A4FF, #006CD9);
}
.button: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;
}
/* Hexadecimal entities for the icons */
.add:before
{
content: "\271A";
}
.edit:before
{
content: "\270E";
}
.delete:before
{
content: "\2718";
}
.save:before
{
content: "\2714";
}
.email:before
{
content: "\2709";
}
</style>
<body>
<h2>Button</h2>
<a href="#" class="button">Button</a>
<a href="#" class="button add">Add</a>
<a href="#" class="button edit">Edit</a>
<a href="#" class="button delete">Delete</a>
<a href="#" class="button save">Save</a>
<a href="" class="button email">Send email</a>
</body>
</html>
Related Links ,

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)