1 like 0 dislike
19 views
in Vaadin by
Vaadin de button css lerini değiştirme nasıl yapılır.

1 Answer

0 like 0 dislike
by
edited

Button oluşturuyoruz.

buttonIcon = new Button();
buttonIcon.setImmediate(true);
buttonIcon.setHeight("60px");
buttonIcon.setWidth("-1px");
buttonIcon.setIcon(new ThemeResource("img/yellow_icon.png")); 
buttonIcon.addStyleName("buttonCSS");  // buttona CSS veriyoruz.

// Icon resminin yolu : /VAADIN/themes/mytheme/img/

** CSS **

// .buttonCSS, buttonun arka plan rengini gradyen yapmak için hazırlanmıştır.

 .buttonCSS{
        background: #45484d; 
        background: -moz-linear-gradient(top,  #45484d 0%, #000000 100%); 
        background: -webkit-linear-gradient(top,  #45484d 0%,#000000 100%);
        background: linear-gradient(to bottom,  #45484d 0%,#000000 100%); 
        color: yellow;

    }
    .v-button{
        border: 1px solid #BB9659;  // button kenarlık kalınlığı ve kenarlık rengi
        border-top-color: #BB9659; // buttonun üzerindeki kenarlık rengi
        border-bottom-color: #BB9659; // buttonun altındaki kenarlık rengi
        -webkit-box-shadow: none; // buttonun gölgesi
        box-shadow: none; // buttonun gölgesi
    }
 .v-button-caption{
        font-family: sans-serif; // buttonun yazı fontu
    }
    .v-button:focus:after{
        border-color: #DAA520; // buttonu focus olduktan sonraki kenarlık rengi
        box-shadow: 0 0 0 1px #FFD700; // buttonun focuz oldukan sonraki kenarlığın gölgesi
    }

Tıklanmadan önceki hali. 

Sonrasi

Tıklandıktan sonraki hali.

Öncesi

...