jQuery ui change button to flat style

I would like to change a button in jQuery ui to adapt the theme of my page, manually. I managed to change the color, the font... But I would like a flat button, like this:

My button looks like this:

Is it possible to remove the shadows?

Here is the css: (jquery 1.10.3)

.ui-dialog .ui-dialog-buttonpane {
        text-align: left;
        border-width: 1px 0 0 0;
        /*background-image: none;*/
        margin-top: .5em;
        padding: .3em 1em .5em .4em;
            outline: none;
            background: #a3cb38
    }
.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset {
        float: right;
    }
.ui-dialog .ui-dialog-buttonpane button {
        /*margin: .5em .4em .5em 0;*/
        position: relative;
            top: 3px;
            left: 15px;
            width: 100px;
            height: 45px;
            cursor: pointer;
            color: #ffffff;   /* couleur police bouton */
            outline: none;
            font-family:Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif;
            background: #fed136;   /* couleur fond bouton */
            border-radius: 6px 6px 6px 6px; 
    }

I'm new in jquery, there's so many button lines...

Answers


That's default button border styles you are seeing, remove the border like so:

border:0;

Need Your Help

Skipping Ranking in Rows which do not meet required value from Mysql sorted ranking with ties?

php mysql ranking

I have googled and searched through this stack site also and could not find which atleast give me some ideas on how I could achieve this. I calculated ranking from sum of totalscore by a student and

Qt double click check left button mouse

c++ qt

I need to run slot only on doubleClick with left button mouse, instead of both.