Skip to main content
Kinetic Community

CSS Button Generator

 

Create Awesome Buttons Friendly Interface The CSS button Generator is a web based application which creates styled buttons.  Highly styled buttons can easily be created through the UI.  When finished CSS will be generated which can be placed into a Service Item to replicate the same buttons.

Link

http://www.cssbuttongenerator.com/

Usage

When you create the button there is a field for "CSS Class Name".  Kinetic Request creates its buttons with a class of "templateButton".  To make the button css work with the buttons created in Kinetic Request, specify "templateButton" in this field.

If any custom buttons are created within the Service Item the class of "templateButton" must be applied to these buttons.

After creating the button, the css will be made available in the tab "Get the Code".  This CSS can be pasted directly into the Custom Header Content field in the Service Item.

Here is some example CSS create by the CSS Button Generator.

<style type="text/css">
.templateButton {
    -moz-box-shadow:inset 0px 0px 0px 0px #ffffff;
    -webkit-box-shadow:inset 0px 0px 0px 0px #ffffff;
    box-shadow:inset 0px 0px 0px 0px #ffffff;
    background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ffa658), color-stop(1, #e16c1e) );
    background:-moz-linear-gradient( center top, #ffa658 5%, #e16c1e 100% );
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffa658', endColorstr='#e16c1e');
    background-color:#ffa658;
    -webkit-border-top-left-radius:6px;
    -moz-border-radius-topleft:6px;
    border-top-left-radius:6px;
    -webkit-border-top-right-radius:6px;
    -moz-border-radius-topright:6px;
    border-top-right-radius:6px;
    -webkit-border-bottom-right-radius:6px;
    -moz-border-radius-bottomright:6px;
    border-bottom-right-radius:6px;
    -webkit-border-bottom-left-radius:6px;
    -moz-border-radius-bottomleft:6px;
    border-bottom-left-radius:6px;
    text-indent:0;
    border:1px solid #dcdcdc;
    display:inline-block;
    color:#ffffff;
    font-family:Arial;
    font-size:15px;
    font-weight:normal;
    font-style:normal;
    height:50px;
    line-height:50px;
    width:100px;
    text-decoration:none;
    text-align:center;
    text-shadow:0px 0px 0px #ffffff;
}
.templateButton:hover {
    background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #e16c1e), color-stop(1, #ffa658) );
    background:-moz-linear-gradient( center top, #e16c1e 5%, #ffa658 100% );
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#e16c1e', endColorstr='#ffa658');
    background-color:#e16c1e;
}.templateButton:active {
    position:relative;
    top:1px;
}</style>

 

Example

Give an example usage of the solution.