圆角,矩形按钮

Question

我有兴趣制作一个类似于https://new.myspace.com/主页上的html按钮.我知道html看起来像这样:

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

虽然我不确定css应该是什么样的.我知道网上有很多关于html按钮的教程,但我不确定半矩形按钮.谢谢,哈里森

Answer 1

使用border-radius.该示例中的确切代码是border-radius: 4px; https://developer.mozilla.org/en-US/docs/CSS/border-radius

遵循Jake的好建议,使用这个全能浏览器规则:

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

Answer 2

尝试:

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

调整边框半径属性的像素数量,以便更改它的舍入程度.

编辑:显然你发布的网站使用4px(代码调整)

第二次编辑:对代码进行调整以制作更大的按钮并实现所有按钮.