PixelBrite.com®

What is a FlexBtn™?

FlexBtn™ are stylized user interface elements that come with three different snippets depending on the application. FlexBtns™ feature hovering effects, text-color styles built in for static and hover states, and support icons—including rollover icons. Read Try It Out below to see a quick sample.

<div class="flexbtn rnd-wgray rnd-bluepastel-h">
    <div class="leftside"></div>
    <a class="rightside" href="link">Label
    <span class="piximage"></span></a>
</div>

<div class="flexbtn rnd-wgray rnd-bluepastel-h">
    <div class="leftside"></div>
    <input class="rightside" type="submit"
    value="Label" />
</div>

<div class="flexbtn rnd-wgray rnd-blue-h withicon">
    <div class="leftside"></div>
    <div class="piximage"></div>
    <input class="rightside" type="submit"
    value="Label" />
</div> 

The Snippets

The HTML Markup, or snippets, are presented on the right. Selection of a snippet will depend on your application. Simply copy-and-paste the appropriate snippet into your HTML document, insert your content where indicated and it will be attractively presented with no image editing or special coding. Typical snippet applications follow:

[ 1 ]   Standard For normal hyperlinks using an anchor <a> tag. This standard version also supports an icon image.

[ 2 ]   Form Submit Used as a form submit button

[ 3 ]   Form Submit with Icon Form submit an extra element for icon support

The samples in this article use the [ 1 ]   Standard snippet. The form versions function identically, using the same class-modifiers. Additional discussion of snippets, form versions, icon dimensions, and other details is provided in the FlexCSS™ Knowledgebase and User Guide.

Class-Modifiers

Class-modifiers are displayed on the right. Although class-modifiers are listed here, and touched on briefly below, they're covered in-depth in the User Guide with supplemental information located in the FlexCSS™ Knowledgebase. FlexBtns™ are very straightforward. Typically, the main Class-Modifiers you will apply are different styles.

Try It Out

After ensuring you have Installed FlexCSS™, copy-and-paste the snippet into your document and fill in the content area. For this try-it-out snippet, we need to include one class (floatleft) which is also highlighted. That's It!— a button is now displayed on your page. Continue reading to learn more about how to adjust the appearance of your new FlexBtn™.

<div class="flexbtn rnd-wgray rnd-bluepastel-h floatleft">
    <div class="leftside"></div>
    <a class="rightside" href="http://pixelbrite.com">Home
    <span class="piximage"></span></a>
</div>

Defaults

FlexBtns™ do not have a default style. This creates versatility in FlexBtns™ by allowing you to exclude a hover class when appropriate: Disabled Buttons, for example. Excluding both styles will render a button without a style/background. Below are some examples of FlexBtns™. For a full listing of style names please refer to the FlexCSS™ Quick Reference or User Guide Quick Reference.

Adding Snippet Content & Styles

Styles are the first thing which should be edited in the default snippet. Below, rblockgel-black and rblockgel-charcoal-med-h are used for the two styles. The rblockgel-black specifies the static state, while the rblockgel-charcoal-med-h selects the hover appearance. Note the -h, which is explained later in this article. Two pieces of information must be inserted into the snippet: 1) The HREF (web address), and 2) The label. Consider this snippet with the areas filled-in and highlighted:

<div class="flexbtn floatleft rblockgel-black rblockgel-charcoal-med-h">
    <div class="leftside"></div>
    <a class="rightside" href="http://www.pixelbrite.com">
    Pixel Brite Creations
    <span class="piximage"></span></a>
</div>

The above snippet would result in this button:

All of the following examples use the same snippet as the one illustrated above. Therefore, only the header div is provided for further samples.

Hover Styles

For FlexBtns™ you will specify two (2) styles. 1) One for the static or normal state. 2) The second, for the hover style. On mouse-over, the FlexBtn™ background changes. The -h appended to a style will flag for hover appearance. For example, the next button uses two styles included with FlexCSS™ Starter Kit and FlexCSS™ Starter Kit with Freedom License. These styles are blue and wgray. Since we want the blue to be the hover appearance, we append -h to the end:

<div class="flexbtn rnd-wgray rnd-blue-h floatleft">

Breaking a FlexBtn™

The above FlexBtn™ clearly demonstrates the need to apply positioning. Because FlexBtns™ are block-level elements—they consume 100% of their parent container's width. This is why a floatleft was required in the previous Try-it-Out section. Whether you address positioning with floating, centering methods, absolutely, inline or through other means, it must be taken into account when incorporating a FlexBtn™ into your document.

Typically, buttons are floated. Three classes are included as short-cuts to positioning: floatleft, floatright and inlineblock which will work for many situations. Clearing content after floating a button is usually required. Positioning is largely beyond the scope of FlexCSS™, but the User Guide provides additional insight.

Fixed below is the broken FlexBtn™ and header div with the class-modifiers highlighted.

<div class="flexbtn cclite cclite-h floatleft">

Someone familiar with the FlexCSS™ Styles Bundle and style names will notice that cclite is not included with FlexCSS™. This is an alias for a style which is discussed in the User Guide—A very handy planning tactic for making global changes and face-lifts quickly.

Clearing

It is very typical to float buttons because of the behavior demonstrated previously. It is a good idea, and usually necessary, to include a clear div after the button, especially if the FlexBtn™ is inside of a FlexBlox™. This is a simple structure:

<div style="clear:both;"></div>

Color Labels

Your FlexBtn™ label coloring is taken care of. FlexBtns™ have two colors built-in for the label which correlate to each state. A color for static/normal and hover. These are all set to match their respective style color, but may be changed in the FlexBtn™ CSS file.

Withicon

To use an image with your FlexBtn™ a CSS statement needs to point to the image. A rollover image is optional and consists of two images in the same file that are side-by-side and evenly spaced apart. Rollover-icons differ in width and the inclusion of the hover-version of the image. In addition, the rollover class is placed in the header div. A rollover image can be used statically by simply omitting the rollover class. The CSS is the same for both which requires pointing the .piximage class to your icon image. The .piximage element is an image placeholder embedded in the snippet. Consider this example which uses a rollover version of the FlexCSS™ Logo. It is a 2-sided image in one file:

.mylogo .piximage {background(images/mylogo.png) 0 0 no-repeat;}

<div class="flexbtn rblock-mustard-lite rblock-rose-h mylogo withicon rollover floatleft">

Dinky Buttons

New with the FlexCSS™ Styles Bundle are mini-buttons, which use the dinky class-modifier. These buttons also support icons, including rollover.

<div class="flexbtn rblockgel-black rblockgel-charcoal-h dinky floatleft">

Form Submit with Icon

In the [ 3 ]   Form Submit with Icon snippets, a div is used for the piximage portion. In the past, we have used a second input element in its place. This allows the left portion of the button to be an active submit button, too. However, there may be accessibility implications in using two form-submit buttons side-by-side as well as browsing experience concerns for situations where style sheets are disabled.

There's an IE7 concern with form buttons which is discussed in the User Guide and in our knowledgebase. FlexCSS™ owners can view the article by clicking the following FlexBtn™

Swapstatic and Swaphover

These classes are used in conjunction with rollover images. The class-modifiers swapstatic and swaphover will flip-flop which image is used for its respective state. These work independently of one another—using one doesn't require the other. Swapstatic will cause the hover portion of the image to be displayed for its static state. Similarly, swaphover will cause the hover version of the image to display for the static state. Using both will essentially treat the rollover image in reverse: The static becomes hover; hover becomes static.

Next up, FlexTabs™

The next article discusses FlexTabs™ which derive from FlexBtns™ and share many characteristics, including snippets.