php - Vary css element width dynamically -

i have following shortcodes in page or post:

[custom_width width='500' color='red']  [custom_width width='600' color='blue'] 

the shortcode function display 2 buttons respective width. problem buttons displayed same width using last width of 600.

the function:

<?php     function xyz ($attr) {         $xyzwidth = $attr['width'];         $xyzcolor = $attr['color'];         my_style($xyzcolor); ?>      <style type="text/css">         .mystyle {             width: <?php echo $xyzwidth; ?>px;         }     </style>      <div class="mystyle">         text     </div>  <?php } ?> 

note: rest of css in own .css file

function  my_style($xyzcolor) {     switch ($xyzcolor) {         case 'red': my_red();             break;          case 'blue': my_blue();             break;     }  <?php function my_red() { ?>    <style type="text/css">     .mystyle {         ............     }     .mystyle: hover {         ............     }     .mystyle {         ............     }     .mystyle a:hover {         ............     }     </style>  <?php } ?> 

if you're using same class (mystyle) on both buttons, last width defined on class apply both elements.

for purposes, you're better off with:

<?php     function xyz ($attr) {         $xyzwidth = $attr['width']; ?>    <div style="width: <?php echo $xyzwidth; ?>px">       text   </div>  <?php     } ?>