The MU forums have moved to WordPress.org

What is the technique Wordpress CSS button technique? (4 posts)

  1. 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? :)

  2. andrea_r
    Moderator
    Posted 14 years ago #

    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;

  3. 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.

  4. Prowebdesign
    Member
    Posted 14 years ago #

    Ouch, this ies great! :)
    Thanks, never had heard about this new property!

    Thanks guys!

About this Topic

  • Started 14 years ago by Prowebdesign
  • Latest reply from Prowebdesign