This discussion is archived
4 Replies Latest reply: Jan 15, 2013 6:45 AM by 984080 RSS

Button Style

975783 Newbie
Currently Being Moderated
Hi guys,
i have a problem with styling a button in my css file. I like to give my button an inner shadow with a linear-gradient effekt.
The button is a simple arrow picture with transparent background and at the top it sould be green and go to yellow at the bottom.
If it is not able to color it with an inner shadow is there an other option i can use? Two effects also did not work out.
-fx-fill is not working.

Here the part i want to change.
.toggle-button:selected{
    -fx-effect: innershadow( three-pass-box , #56c102 , 5 , 0.5 , 0 , 0 );
    /*-fx-effect: innershadow( three-pass-box , #8fe130 , 5 , 1 , 0 , 0 ); not working with second */
    /*-fx-effect: linear-gradient(to bottom, #56c102 0%,#8fe130 100%); not working*/
    /*-fx-effect: innershadow( three-pass-box ,linear-gradient(to left, derive(#5fc502,-15.5%), derive(#5fc502,34%) 30%), 20 , 0.5 , 0 , 0 ); not working*/ 
    /*-fx-fill: linear-gradient(to bottom, derive(#5fc502,-15.5%), derive(#5fc502,34%) 30%); not working*/     
    /*-fx-content-display: linear-gradient(to bottom, derive(#5fc502,-15.5%), derive(#5fc502,34%) 30%); not working*/
    
}
Is there an way to handle this without loading another image?
Thank you.
  • 1. Re: Button Style
    975783 Newbie
    Currently Being Moderated
    Has noone a solution for this problem?
  • 2. Re: Button Style
    984080 Explorer
    Currently Being Moderated
    I'm not sure where you want to go with your styling of your button, but those links can help you a lot with custom css styling:

    http://fxexperience.com/2011/12/styling-fx-buttons-with-css/
  • 3. Re: Button Style
    975783 Newbie
    Currently Being Moderated
    Unfortunately that is not what i am looking for.
    I need something like.
     -fx-effect: innershadow( three-pass-box , linear-gradient(...) , 5 , 0.5 , 0 , 0 );
    I though that should be no problem but it seems it is just possible with pictures :(
  • 4. Re: Button Style
    984080 Explorer
    Currently Being Moderated
    I don't think this is possible.

    --> from the documentation, you'll see it expecting a number value.

    ------
    Inner Shadow

    A high-level effect that renders a shadow inside the edges of the given content.

    innershadow( <blur-type> , <color> , <number> , <number> , <number> , <number> )

    <blur-type> = [ gaussian | one-pass-box | three-pass-box | two-pass-box ]
    <color> The shadow Color.
    <number> The radius of the shadow blur kernel. In the range [0.0 ... 127.0], typical value 10.
    <number> The choke of the shadow. The choke is the portion of the radius where the contribution of the source material will be 100%. The remaining portion of the radius will have a contribution controlled by the blur kernel. A choke of 0.0 will result in a distribution of the shadow determined entirely by the blur algorithm. A choke of 1.0 will result in a solid growth inward of the shadow from the edges to the limit of the radius with a very sharp cutoff to transparency inside the radius. Values should be in the range [0.0 ... 1.0].
    <number> The shadow offset in the x direction, in pixels.
    <number> The shadow offset in the y direction, in pixels.
    ------

    Maybe you can try with multiple borders on the same side..

    Edited by: 981077 on 15-jan-2013 6:45

Legend

  • Correct Answers - 10 points
  • Helpful Answers - 5 points