Question

如何使用css文件创建圆角按钮以及如何在按钮中应用此css文件。请给出

的css代码

Answer 1

对IE使用 border-radius ，对Firefox使用 -moz-border-radius ，对于safari使用 -webkit-border-radius

#example1 {
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
border-radius: 15px; }

参考http://www.css3.info/preview/rounded-border/

Answer 2

指定所需的角落：

border-top-left-radius: 10px 5px;
border-bottom-right-radius: 10% 5%;
border-top-right-radius: 10px;

Border-radius: create rounded corners with CSS!

Answer 3

这取决于你对按钮的意思。但这是CSS：

.button {
    -moz-border-radius: 20px;
    -webkit-border-radius: 20px;
    -khtml-border-radius: 20px;
    border-radius: 20px;
}

只需按下按钮

即可

以下是有关border-radius的更多信息： Border radius Css3files

Answer 4

使用border-radius CSS属性进行设置。

请参阅here for demo

Answer 5

使用CSS border-radius属性创建圆角按钮。

<form action="" method="get">

    <div class="ui floating dropdown labeled search icon button dd">
        <input type="hidden" name="nutr_code">
        <span class="text">Select nutrient</span>
        <div class="menu">
            <div class="item" data-value="ca">Calcium</div>
            <div class="item" data-value="fe">Iron</div>
            <div class="item" data-value="mg">Magnesium</div>
            <div class="item" data-value="zn">Zinc</div>
        </div>
    </div>
    <br><br>
    <input type="submit" value="Show results">

</form>

.btn {
   display: inline-block;
   border: 1px solid transparent;
   border-radius: 24px;
   padding: 12px 32px;
   text-align: center;
   cursor: pointer;
   font-size: 1rem;
   color: #fff;
}

.btn-blue  {background-color: #007bff;}
.btn-green {background-color: #28a745;}
.btn-red   {background-color: #dc3545;}
.btn-grey  {background-color: #6c757d;}

/* Change bg-color on mouse over  */
.btn-blue:hover  {background-color: #0069d9;}
.btn-green:hover {background-color: #218838;}
.btn-red:hover   {background-color: #c82333;}
.btn-grey:hover  {background-color: #5a6268;}

Answer 6

我认为这个答案要简单得多。

这是使用的以下代码：

<html>
<style>
.btn {
    border-radius: 5px 5px 5px 5px;
    padding: 2px 2px;
    background-color: DarkOliveGreen;
}
</style>
<a href="http://google.com" class="btn">test</a>
<html>

此按钮是带有填充和边框半径的超链接。简单得多

如何使用css文件创建圆角按钮？

6 个答案: