css on the gnome-shell that make a beveled button

Question

i'm new to gnome-shell modding. i've been struggling to make some modification to my gnome-shell theme. i like the concept of old-ish, simple *box desktop. so i tried to modified my gnome-shell to looks like one.

i tried to make some bevel on my gnome-shell, and it turned out to be like this. i don't know what's wrong with my code, i tried many combination.

https://i.stack.imgur.com/E0aRq.png

i want to make at least like this one, is it possible?

https://i.stack.imgur.com/gFuL1.png

here's my code

.panel-button {
        -natural-hpadding: 12px;
        -minimum-hpadding: 8px;
        font-weight: bold;
        color: #4A4A4A;
        border: 3px solid #000000;
        border-top: 3px solid transparent;
        border-bottom: 5px solid #000000;
        box-shadow: 
            1.5px 1.5px 0px rgba(0,0,0,1), /*bottom external highlight*/
            0px 0px 3px #666, /*top external shadow*/ 
            inset 0 -1px 1px #000000, /*bottom internal shadow*/ 
            -1px -1px 1px rgba(255,255,255,1); /*top internal highlight*/;
}

sorry for my bad English.

Answer 1

I dont know if there is something special to gnome shell when it comes to styling but expect this to work.

JSFiddle

button {
    height: 25px;
    background: #ddd;
    border-bottom: solid 1px #aaa;
    border-right: solid 1px #aaa;
    border-top: solid 1px #fff;
    border-left: solid 1px #fff;
}

button.active {
    border-bottom: solid 1px #fff;
    border-right: solid 1px #fff;
    border-top: solid 1px #aaa;
    border-left: solid 1px #aaa;
}