Rounded corner, rectangle buttons

问题

I am interested in making an html button similar to the ones found on the homepage of https://new.myspace.com/. I know that the html would look like this:

 <button class="button" id="join">Join</button>

Although I'm not sure on what the css should look like. I know there are many tutorials online about html buttons, but I'm not sure about semi-rectangular ones. Thanks, Harrison

回答1:

Use border-radius. The exact code in that example is border-radius: 4px; https://developer.mozilla.org/en-US/docs/CSS/border-radius

Following Jake's good advices, use this catch-all-browser rules:

button#join {
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
}

回答2:

Try:

<button class="button" id="join">Join</button>

Css:

.button {
    /*adjust the roundness*/
    border-radius: 4px;
    moz-border-radius: 4px;
    webkit-border-radius: 4px;
    /*adjust height and width*/
    height: 20px;
    width: 20px; 
    /*change border colour*/
    border:1px #245ec6 solid;
}

Adjust the amount of pixels the border radius property is in order to change how much it is rounded.

Edit: apparently the website you posted uses 4px (code adjusted)

Second edit: Adjustments made to the code to make larger buttons and to effect all buttons.

回答3:

Here's a little info on border-radius: http://www.css3.info/preview/rounded-border/

And here's a cool little generator to make things easy: http://border-radius.com/

来源：https://stackoverflow.com/questions/15037133/rounded-corner-rectangle-buttons

标签

html

css

button