CODEWITHSUNDEEP
htmlcssbutton
Harrison Howard
Harrison Howard

Reputation: 173

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

Upvotes: 2

Views: 57523

Answers (3)

Bernie
Bernie

Reputation: 1489

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.

Upvotes: 5

martriay
martriay

Reputation: 5742

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;
}

Upvotes: 9

MikeB
MikeB

Reputation: 2452

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/

Upvotes: 0

Related Questions