Based on information from both of your examples I believe your <<button>> macros should look like the following...
<<button "Male" "part3">>
<<set $playerGender = "male">>
<</button>>
<<button "Female" "part3">>
<<set $playerGender = "female">>
<</button>>
Depending on if you want to style both of the above individually or together you have a number of options, but they all generally consist of:
1. Some how mark the button(s) you want to stye, you could use Custom Style to do that..
/* Mark each button with it's own ID. */
@@#male;<<button "Male" "part3">><<set $playerGender = "male">><</button>>@@
@@#female;<<button "Female" "part3">><<set $playerGender = "female">><</button>>@@
/* Mark all of the buttons with the same CSS class. */
@@.gender;<<button "Male" "part3">><<set $playerGender = "male">><</button>>@@
@@.gender;<<button "Female" "part3">><<set $playerGender = "female">><</button>>@@
2. Add CSS to the Story Stylesheet area that target those markings.
/* Style each of button that are marked with an ID. */
#male button {
color: green;
}
#female button {
color: orange;
}
/* Style all buttons that are marked with the classname. */
.gender button {
color: yellow;
}