B4J Question CSSUtils Hover

[Chris Guanzon]

Hello, how can use the button:hover or button: pressed using cssutils?

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

 

[EnriqueGonzalez]

Its easier to handle those with a css style sheet

CSS Example

This is a port of this tutorial: http://docs.oracle.com/javafx/2/get_started/css.htm It demonstrates how CSS sheets can be used to style the UI. Example was updated and it now based on the internal designer. The only properties that are set in the CSS file are related to the button states.

www.b4x.com

 

[Chris Guanzon]

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

         .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

 

[TILogistic]

You must use javafx css.

Sample;

Styling FX Buttons with CSS

A number of people have asked me recently can I create this look or that look using CSS in JavaFX. Or they have said that you could never do that! So I thought I would do a little experiment and tr…

fxexperience.com

B4J:
You can use this to apply css

Button1.Style = $"------- CSS -----"$

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

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

or by design

Manual:

JavaFX CSS Reference Guide

This document describes the JavaFX Cascading Style Sheets (CSS) for JavaFX 8 and explains the styles, values, properties and associated grammar.

docs.oracle.com

 

[TILogistic]

see demo css:

Personalizar vista B4XFloatTextField

Estimados, Quiero compartir un ejemplo (archivo adjunto) de como se puede personalizar una vista B4XFloatTextField de la librería XUI Views. En este ejemplo he usado el método de desarrollo B4XPages, y si desea se puede usar en el desarrollo normal. La única diferencia entre las plataforma...

www.b4x.com

 

[TILogistic]

sample:

    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;
                    "$

 

[TILogistic]

button sample in forum:

Styling buttons with CSS

Not a tutorial from me, but I thought I'd share this link which has some nice buttons styled in CSS. http://fxexperience.com/2011/12/styling-fx-buttons-with-css/ Create the css file and add it to the files tab, then add a style class to each button and add the css in the designer (or code) to...

www.b4x.com