CSS3 buttons and EPiServer editor stylesheet

Posted on May 8, 2011 by Frederik Vig in EPiServer

You’ve probably seen them around, the cool new CSS3 styled buttons. Before you had to use images and image replacement to achieve a similar effect. Now you can do this without images and by only using CSS. The cool thing about this is that it makes it so much easier to use on our sites. We can easily add these buttons to the editor stylesheet and let our editors choose from the different action buttons that they are allowed to use.

Here is a button that we can use in three different colors. As you can see the only change needed is the additional HTML class.

<p><a href="#" class="action-button blue">Blue button</a></p>
<p><a href="#" class="action-button green">Green button</a></p>
<p><a href="#" class="action-button orange">Orange button</a></p>

The CSS code looks like this:

.action-button, .action-button:visited {
	display: inline-block; 
	padding: 5px 10px; 
	color: #fff; 
	text-decoration: none;
	cursor: pointer;
	-moz-border-radius: 5px; 
	-webkit-border-radius: 5px;
	border-radius: 5px;
	-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
	-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
	text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
 
}
 
.action-button.green, .action-button.green:visited		{ background-color: #99c70a; }
.action-button.green:hover						{ background-color: #6f9302; }
.action-button.blue, .action-button.blue:visited		{ background-color: #22adbf; }
.action-button.blue:hover							{ background-color: #017691; }
.action-button.orange, .action-button.orange:visited		{ background-color: #ff5c00; }
.action-button.orange:hover							{ background-color: #d45500; }

To make it work in Internet Explorer as well we can use CSS3 PIE.

We can easily add these three buttons to the editor stylesheet so that our editors can pick them from the styles drop down list in TinyMCE.

.action-button, .action-button:visited {
	display: inline-block; 
	padding: 5px 10px; 
	color: #fff; 
	text-decoration: none;
	cursor: pointer;
	-moz-border-radius: 5px; 
	-webkit-border-radius: 5px;
	border-radius: 5px;
	-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
	-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
	text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
}
 
.action-button.green 
{
    EditMenuTitle: Buttons;
	EditMenuName: Green;
    background-color: #99c70a;
}
.action-button.blue {
	EditMenuName: Blue;
    background-color: #22adbf;
}
.action-button.orange {
	EditMenuName: Orange;
    background-color: #ff5c00; 
}

You can set the path to your editor stylesheet in episerver.config, under site settings and uiEditorCssPaths or by adding a dynamic property with the name UIEditorCssPaths.

This will add the options green, blue and orange to the style drop down list, grouped under the Buttons title:

We can now select any link and apply the button look to it. The result:

Pretty cool huh?

Related Posts: