Thanks.

The question is how do I make sure the buttons.php css is loaded in the browser so when I use elgg-button classes, the buttons are styled appropriately.

Aha.

I figured this out. The theme was overriding the view, then returning true at the top so the button css never loaded. Working it out with the theme.

@ Dave Bauer , Do not change plugins css or core files... when upgrading, you will run into nightmares! What You need to do is write your own plugin and in your own plugin start.php file, extend the code below

elgg_extend_view('css/elgg', 'anyname/elements/buttons');  // this is css to modify buttons buttons

your buttons.php css file ubove will have something like

<?php
/**
 * CSS buttons
 * @subpackage UI
 */
?>
/* <style>
/* **************************
    BUTTONS
************************** */

.my-button + .my-button {
    margin-left: 4px;
}


/* Base */
.my-button {
    color: #333;
    font-weight: bold;
    text-decoration: none;
    width: auto;
    margin: 0;
    font-size: 11px;
    line-height: 16px;
   
    padding: 2px 6px;
    cursor: pointer;
    outline: none;
    text-align: center;
    white-space: nowrap;

    -webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.10), inset 0 1px 0 #fff;
    -moz-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.10), inset 0 1px 0 #fff;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.10), inset 0 1px 0 #fff;

    border: 1px solid #999;
    border-bottom-color: #888;

    background: #eee;
    background: -webkit-gradient(linear, 0 0, 0 100%, from(#f5f6f6), to(#e4e4e3));
    background: -moz-linear-gradient(#f5f6f6, #e4e4e3);
    background: -o-linear-gradient(#f5f6f6, #e4e4e3);
    background: linear-gradient(#f5f6f6, #e4e4e3);
}

.my-button-delete {
    background: #444;
    border: 1px solid #333;
    color: #eee !important;
    -webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.10), inset 0 1px 0 #999;
    -moz-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.10), inset 0 1px 0 #999;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.10), inset 0 1px 0 #999;
}

Then on the same start.php file change the "link_class" to your own class that you want to modify,

elgg_register_menu_item('title', array(

                    'name' => 'remove_me_from_here', // the name of your menu item

                    'text' => elgg_view_icon('users') . elgg_echo('delete:menow'),

                    'href' => "/action/delete/remove?me=$owner->guid",

                    'is_action' => TRUE,
                   
                    'link_class' => 'my-button my-button-delete', // my button class controlled by your css

                    'contexts' => array('profile'), // the page where the css will be loaded
                   
                    'priority' => 1, // this will give your plugin first priority then followed by other buttons

                ));

And this will work once your flash your catches....

Hope it helps some one having the same problem...