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

    Non gradient border for buttons

    megatron242

      Hi,

       

      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,

      Vince

        • 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

             

            Button
            {
                 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

              myIP:

              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
                Lehaleha

                Hi,

                 

                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);
                
                <skipped>
                
                // button border/edge
                drawRoundRect(
                     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