4 Replies Latest reply on Nov 30, 2009 4:38 AM by Lehaleha

    Non gradient border for buttons




      I'm trying to create a simple button with a _non_ gradient border. As trivial as it might sound, I can't figure out how to do this, since in the CSS, there is only a single value for the color of the border. Can anyone please advice?


      Thanks in advance,


        • 1. Re: Non gradient border for buttons
          injpix Level 3

          I also tried to remove that gradient that is found on most UIComponents.  Its that black overlay/gradient on the bottom half, right?  I dont know, perhaps there is a mx_internal property somewhere in the UIComponent class.  It seems that the current API doesnt allow it, since this Style explorer can't do it:


          Flex 3 Style Explorer

          • 2. Re: Non gradient border for buttons
            Michael Borbor Level 4

            If you write a CSS like this


                 fillAlphas: 1.0, 1.0;
                 fillColors: #FC0000, #FC0000;

            You get a solid color, probably what is changing the appearance are the highlights.

            • 3. Re: Non gradient border for buttons
              megatron242 Level 1


              Yes, that's exactly what I meant. It's wierd that Adobe enforce this behaviour, perhaps someone here in the forums would know the solution...


              Michael Borbor:

              Putting the parameters you suggested doesn't seem to affect the border gradient. Besides, I do want a gradient on the background of the button.

              • 4. Re: Non gradient border for buttons



                Maybe its a little late post, but I found it trying to do the same. To inform other guys which will do the same in future: it seems that it is impossible to do via CSS.


                I've looked through mx\skins\halo\ButtonsSkin.as and found following code:


                var borderColor:uint = getStyle("borderColor");
                var borderColorDrk1:Number =
                     ColorUtil.adjustBrightness2(borderColor, -50);
                // button border/edge
                     0, 0, w, h, cr,
                     [ borderColor, borderColorDrk1 ], 1,
                     verticalGradientMatrix(0, 0, w, h ),
                     GradientType.LINEAR, null, 
                     { x: 1, y: 1, w: w - 2, h: h - 2, r: cornerRadius - 1 }); 


                So, I see 2 ways - draw new skin or just relax...


                Best regards,

                Alex Kon