html - Create buttons with radius -

html - Create buttons with radius -

i want create on picture, don't have thought how create button in html [bootstrap] bottom-border radious?

here sample if want create

is possible create buttons or in css. here try..

<div class="col-md-12"> <a class=" col-md-6 btn btn-success btn-large btn1" href="#" style="color: rgb(255, 255, 255); background-image: -moz-linear-gradient(center top , rgb(98, 196, 98), rgb(81, 163, 81)); background-color: rgb(81, 163, 81);">success</a> <a class=" col-md-6 btn btn-success btn-large btn2" href="#" style="color: rgb(255, 255, 255); background-image: -moz-linear-gradient(center top , rgb(98, 196, 98), rgb(81, 163, 81)); background-color: rgb(81, 163, 81);">success</a> <div class="circle"> <img class=" logo img-responsive" src="images/biz_club.jpg"/></div> </div> <a class=" col-md-6 btn btn-success btn-large btn3" href="#" style="color: rgb(255, 255, 255); background-image: -moz-linear-gradient(center top , rgb(98, 196, 98), rgb(81, 163, 81)); background-color: rgb(81, 163, 81);">success</a> <a class=" col-md-6 btn btn-success btn-large btn4" href="#" style="color: rgb(255, 255, 255); background-image: -moz-linear-gradient(center top , rgb(98, 196, 98), rgb(81, 163, 81)); background-color: rgb(81, 163, 81);">success</a> </div>

this ok, need border-bottom of button bend.

you utilize : border-radius, overflow, position , transform. demo

html

<div> <a href><span>success</span></a> <a href><span>success</span></a> <a href><span>success</span></a> <a href><span>success</span></a> <img src="http://dummyimage.com/140x140/059/000&text=text"/> </div>

css

div { width:200px; margin:1em auto; position:relative; } { float:left; height:100px; width:100px; background:gray; text-align:center; } span { display:inline-block; transform:rotate(-45deg); line-height:70px; color:white; } a+a span {/* or utilize a:nth-child(2) span or ~ span */ transform:rotate(45deg); } a+a+a span { transform:rotate(-135deg); line-height:125px; } a+a+a+a span { transform:rotate(135deg); line-height:125px; } a+a {/* or utilize a:nth-child(2) or ~ */ background:lime; } a+a+a { background:purple; } a+a+a+a { background:tomato; } img { position:absolute; top:30px; left:30px; } div, img { border-radius:100%; overflow:hidden; box-shadow:0 0 5px; }

html css twitter-bootstrap