Prowebdesign
Member
Posted 14 years ago #
Hi!
I cant get solved this issues with the rounded buttons that have been used in Wordpress Admin panel.
Does anyone know the technique that has been used to create these buttons? I have seen a lot of rounded button techniques before, but this one is quite odd - even used FireBug to see how they are made, but it looks like they have been made out of 1 image that is a square image - not even one place of it is round shaped, so i cant get it - how the button gets rounded?
Maybe somebody can solve this and give me the answer how wordpress does this? :)
CSS.
For a specific example, using Firebug, the tabs at the top of this very screen have rounded corners using these lines:
-moz-border-radius-topleft:3px;
-moz-border-radius-topright:3px;
kgraeme
Member
Posted 14 years ago #
.submit input,
.button,
.button-primary,
.button-secondary,
.button-highlighted,
#postcustomstuff .submit input {
text-decoration: none;
font-size: 11px !important;
line-height: 16px;
padding: 2px 8px;
cursor: pointer;
border-width: 1px;
border-style: solid;
-moz-border-radius: 11px;
-khtml-border-radius: 11px;
-webkit-border-radius: 11px;
border-radius: 11px;
-moz-box-sizing: content-box;
-webkit-box-sizing: content-box;
-khtml-box-sizing: content-box;
box-sizing: content-box;
}
Notice the various border-radius styles? CSS3 introduces the border-radius property and some browsers added custom support prior to the spec being official. Try looking at the buttons in IE and you'll see that they aren't rounded.
Prowebdesign
Member
Posted 14 years ago #
Ouch, this ies great! :)
Thanks, never had heard about this new property!
Thanks guys!