B4J Question CSSUtils Hover

Chris Guanzon

Active Member
Licensed User
Hello, how can use the button:hover or button: pressed using cssutils?

B4X:
.button:hover {
        background-position: right center; /* change the direction of the change here */
        color: #fff;
        text-decoration: none;
      }
 

EnriqueGonzalez

Well-Known Member
Licensed User
Longtime User
Its easier to handle those with a css style sheet
 
Upvote 0

Chris Guanzon

Active Member
Licensed User
Hello @Enrique Gonzalez R thank you for your reply.

Its easier to handle those with a css style sheet

this is the css I used
CSS:
         .button {background-image: linear-gradient(to right, #00d2ff 0%, #3a7bd5  51%, #00d2ff  100%)}
         .button {
            margin: 10px;
            padding: 15px 45px;
            text-align: center;
            text-transform: uppercase;
            transition: 0.5s;
            background-size: 200% auto;
            color: white;           
            box-shadow: 0 0 20px #eee;
            border-radius: 10px;
            display: block;
          }

          .button:hover {
            background-position: right center; /* change the direction of the change here */
            color: #fff;
            text-decoration: none;
          }

Here's a sample, it's not working in my project
 

Attachments

  • css.zip
    2.4 KB · Views: 58
Last edited:
Upvote 0

Omar Parra A.

Expert
Licensed User
Longtime User
You must use javafx css.

Sample;

B4J:
You can use this to apply css
B4X:
Button1.Style = $"------- CSS -----"$

or create a file with the CSS you want to apply:

B4X:
MainForm.Stylesheets.Add(File.GetUri(File.DirAssets, "Style.css"))

or by design

1620452924418.png


Manual:
 
Upvote 0

Omar Parra A.

Expert
Licensed User
Longtime User
see demo css:

 
Upvote 0

Omar Parra A.

Expert
Licensed User
Longtime User
sample:

B4X:
    Button1.Style = $"
                    -fx-background-color:
                    linear-gradient(#f0ff35, #a9ff00),
                    radial-gradient(center 50% -40%, radius 200%, #b8ee36 45%, #80c800 50%);
                    -fx-background-radius: 6, 5;
                    -fx-background-insets: 0, 1;
                    -fx-effect: dropshadow( three-pass-box , rgba(0,0,0,0.4) , 5, 0.0 , 0 , 1 );
                    -fx-text-fill: #395306;
                    "$

1620453941235.png
 

Attachments

  • javafxdemo.zip
    2.1 KB · Views: 65
Upvote 0

Omar Parra A.

Expert
Licensed User
Longtime User
button sample in forum:

 
Upvote 0
Top