Question

我希望有人可以帮助我。

我需要在css按钮上放一个圆圈。有没有办法在下面的“a”中做到这一点？谢谢！

当我尝试添加此内容时......

width: 10px;
height: 10px;
background: red;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 50px;

它按下了按钮的形状。我正在尝试拍摄一个纯粹的css按钮，上面有一个圆形的圆形。

a {
    font-size:23px;
    font-family:Arial;
    font-weight:bold;
    -moz-border-radius:10px;
    -webkit-border-radius:10px;
    border-radius:10px;
    border:1px solid #dcdcdc;
    padding:14px 48px;
    text-decoration:none;
    background:-moz-linear-gradient( center top, #dcdcdc 47%, #b5b5b5 58% );
    background:-ms-linear-gradient( top, #dcdcdc 47%, #b5b5b5 58% );
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#dcdcdc', endColorstr='#b5b5b5');
    background:-webkit-gradient( linear, left top, left bottom, color-stop(47%, #dcdcdc), color-stop(58%, #b5b5b5) );
    background-color:#dcdcdc;
    color:#555555;
    display:inline-block;
    text-shadow:0px 1px 1px #ffffff;
}

.css_btn_class:hover {
    background:-moz-linear-gradient( center top, #b5b5b5 47%, #dcdcdc 58% );
    background:-ms-linear-gradient( top, #b5b5b5 47%, #dcdcdc 58% );
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#b5b5b5', endColorstr='#dcdcdc');
    background:-webkit-gradient( linear, left top, left bottom, color-stop(47%, #b5b5b5), color-stop(58%, #dcdcdc) );
    background-color:#b5b5b5;
}

.css_btn_class:active {
    position:relative;
    top:1px;
}

Answer 1

您可以使用:before选择器在<a>链接的顶部添加圆圈形状。

a {
    position: relative;
}
a:before {
    content: '';
    width: 10px;
    height: 10px;
    background: red;
    -moz-border-radius: 50px;
    -webkit-border-radius: 50px;
    border-radius: 50px;
    position: absolute;
    top: 6px;
    right: 9px;
}

<强> Demo

Answer 2

像JSFiddle之类的东西应该指向正确的方向：

<强> HTML

<a href="#">Button</a>

<强> CSS

a
{
    position: relative;
    display: block;
    padding-left: 50px;
    background-color: green;
}
a:before
{
    content: "";
    position: absolute;
    left: 10px;
    height: 30px;
    width: 30px;
    border-radius: 15px;
    background-color: red;
}

如何在CSS按钮中添加圆形

2 个答案: