Button Style help please

3 posts, 0 answers
  1. Michael
    Michael avatar
    31 posts
    Member since:
    Dec 2011

    Posted 05 Apr 2012 Link to this post

    Hi, i am trying to style our radButtons in the same way our asp buttons are styled.  Here is our current css class for our asp buttons:

    .button {
        height: 21px;
        background-image: url('/Common/Images/button.png');
        background-repeat: repeat-x;
         
        border-radius: 4px;
        -moz-border-radius: 4px;
        -webkit-border-radius: 4px;
         
         
        border-left: 1px solid #666;
        border-right: 1px solid #666;
        border-top: 0px;
        border-bottom: 0px;
        color: white;
        padding-left: 12px;
        padding-right: 12px;
        cursor: pointer;
             
    }


    I have tried a few different ways but i get some weird things happening.  For instance, it also styles our rad toggle buttons which is very weird.  Im sure it's going to be quite simple for you guys but im just struggling to get it right.

    Some css i tried:
    .RadButton {
        height: 21px !important;
        background-image: url('/Common/Images/button.png') !important;
        background-repeat: repeat-x !important;
         
        border-radius: 4px !important;
        -moz-border-radius: 4px !important;
        -webkit-border-radius: 4px !important;
         
         
         
        border-left: 1px solid #666 !important;
        border-right: 1px solid #666 !important;
        border-top: 1px solid #666 !important;
        border-bottom: 1px solid #666 !important;
        color: white !important;
        padding-left: 12px !important;
        padding-right: 12px !important;
        cursor: pointer !important;
    }
    .rbDecorated {
        height: 21px !important;
        background-image: url('/Common/Images/button.png') !important;
        background-repeat: repeat-x !important;
         
      
       
        border: 0px !important;
        color: white !important;
        cursor: pointer !important;
    }
    .rbSkinnedButton {
      height: 21px !important;
        background-image: url('/Common/Images/button.png') !important;
        background-repeat: repeat-x !important;
         
      
       
        border: 0px !important;
        color: white !important;
        cursor: pointer !important;
    }
    .rbSkinnedButton:hover
    {
        background-position: initial !important;
        height: 21px !important;
        background-image: url('/Common/Images/button.png') !important;
        background-repeat: repeat-x !important;
         
      
       
        border: 0px !important;
        color: white !important;
        cursor: pointer !important;
    }

    Any help you can provide is greatly appreciated.

    Thanks,
    Michael
  2. Michael
    Michael avatar
    31 posts
    Member since:
    Dec 2011

    Posted 05 Apr 2012 Link to this post

    Managed to solve it with the below css:

    .button.RadButton {
        height: 21px !important;
        background-image: url('/Common/Images/button.png') !important;
        background-repeat: repeat-x !important;
         
        border-radius: 4px !important;
        -moz-border-radius: 4px !important;
        -webkit-border-radius: 4px !important;
         
         
         
        border-left: 1px solid #666 !important;
        border-right: 1px solid #666 !important;
        border-top: 1px solid #666 !important;
        border-bottom: 1px solid #666 !important;
        color: white !important;
        padding-left: 12px !important;
        padding-right: 12px !important;
        cursor: pointer !important;
    }
    .button.rbdecorated,
    .button.rbSkinnedButton,
    .button.radbutton_outlook.rbskinnedbutton,
    .button.radbutton_outlook .rbdecorated,
    .button.radbutton_outlook.rbverticalbutton,
    .button.radbutton_outlook.rbverticalbutton .rbdecorated,
    .button.radbutton_outlook .rbsplitright,
    .button.radbutton_outlook .rbsplitleft,
    .button.rbSkinnedButton:hover
     {
        height: 21px !important;
        background-image: url('/Common/Images/button.png') !important;
        background-repeat: repeat-x !important;
        border: 0px !important;
        color: white !important;
        cursor: pointer !important;
        background-position: initial;
    }

  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Bozhidar
    Admin
    Bozhidar avatar
    679 posts

    Posted 06 Apr 2012 Link to this post

    Hello,

    It is good you managed to solve the issue on your own, but I would suggest you to check RadButtom Custom Skin and to keep as close as it is possible to the good practices recommended.

    Kind regards,
    Bozhidar
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
Back to Top