CommandToolbarButton Visually Different in Demo, No Tag Differences

Question

Looking at the af:commandToolbarButton in the TagGuide of the ADF demo, I noticed that some buttons are rendered initially looking like a button and others are "flat," and don't look like a button until you hover over them. There is nothing in the button tag that appears to make this distinction and the buttons in question do not have id attributes to apply a different style.
Here is a portion of the code from the demo page. Looking at the tag guide, the "No icon" button looks like a button, but the "back" and "forward" buttons do not. Also look at the "Click" and "Me" buttons, though code not posted here.
<af:group>
                      <af:commandToolbarButton text="No icon" shortDesc="No icon" />
                      <af:commandToolbarButton text="back" shortDesc="back"
                        disabled="true"
                        icon="/images/backarrow.gif"
                        disabledIcon="/images/backarrow_gray.gif" />
                      <af:commandToolbarButton
                        text="forward"
                        shortDesc="forward"
                        icon="/images/icon_forward_button.gif" />
                    </af:group>Can someone tell me how to go about getting my commandToolbarButtons to look like a button?
Thanks,
Al

Answer 1

Ric,
I have CommandToolbarButtons with text only (no icons), and I want them to appear as buttons, not flat, but they appear flat, contrary to what you are saying the expected behavior is. Any ideas?
I created my toolbar/buttons by dragging the components into my jspx file, the only attributes I changed were the button text and ids and added actions.
Here is my code:
<af:toolbox binding="#{backing_Bean1.toolbox1}"
            id="toolbox1">
  <af:toolbar binding="#{backing_Bean1.toolbar1}"
              id="toolbar1" flex="0">
    <af:group binding="#{backing_Bean1.group2}"
              id="group2">
      <af:commandToolbarButton text="Add"
                               binding="#{backing_Bean1.addButton}"
                               id="addButton"
                               action="add"/>
      <af:commandToolbarButton text="Delete"
                               binding="#{backing_Bean1.deleteButton}"
                               id="deleteButton"
                               disabled="true">
        <af:showPopupBehavior popupId="deletePopup"
                              align="afterEnd"
                              alignId="deleteButton"/>
      </af:commandToolbarButton>
    </af:group>
  </af:toolbar>
</af:toolbox>Thanks,
Al