1 Reply Latest reply on Mar 4, 2007 11:30 AM by KomputerMan.com

    Button border

    KomputerMan.com Level 1
      Hello out there all you Flexers!!!

      Just wondering if anybody knows a way to make a buttons border invisible. I am using images in my buttons and I don't want to see the border around the button. So far this is what I have in my css file. The top of the border is gone but the bottom of it and 85% of the sides are still visible. Thanks in advance for any available help!!!

      Button {
      cornerRadius: 0;
      textIndent: 0;
      paddingLeft: 0;
      paddingRight: 0;
      highlightAlphas: 0, 0;
      fillAlphas: 1, 1, 1, 1;
      fillColors: #feffe1, #feffe1, #feffe1, #feffe1;
      color: #feffe1;
      textRollOverColor: #feffe1;
      textSelectedColor: #feffe1;
      borderColor: #feffe1;
      themeColor: #feffe1;
      borderStyle: none;
      dropShadowColor: #feffe1;
      }

      Have an Ordinary Day...
      KomputerMan ~|:-)
        • 1. Re: Button border
          KomputerMan.com Level 1
          First off... Sorry... I posted this in the wrong topic... My bad I though I was in the general discussion forum.

          Second off I don't think you can eliminate the border in a Button control, you could in Flex 1.5 but not in 2.0. Not sure why but... there is a workaround. So instead of using a button control I used a LinkButton control. I also got rid of the stylesheet entry for the button and just created the control like this:

          public function myMouseOver():void
          {
          useHandCursor=true;
          buttonMode=true;
          }

          public function myMouseOut():void
          {
          useHandCursor=false;
          buttonMode=false;
          }


          <mx:LinkButton id="myResume_Button" upIcon="@Embed('images/MyResume.gif')" icon="@Embed('images/MyResume.gif')"
          overIcon="@Embed(source='images/MyResume_1.gif')" downIcon="@Embed(source='images/MyResume_1.gif')"
          toolTip="Click here to read about our company!" click="myViewStack.selectedChild=search;" rollOverColor="#feffe1" color="#feffe1"
          mouseOver="myMouseOver()" mouseOut="myMouseOut()" top="2" left="20" width="115" height="156" />


          This works great!!! I have the appearance of an animated gif as a button in my Flex app now without the button border!!! I included the two mouse events because I use them to change my mouse pointer from an arrow to a finger. That way when the mouse goes over the button, the picture in the button itself changes and so does the curser.

          Have an Ordinary Day...
          KomputerMan ~|:-)