css - cssを使用してタグを作成する方法

Question

サイトで次の画像を見ました、

彼らは背景画像を使用しておらず、これはすべてcssで行っています。cssを使用してこのようなタグを作成するにはどうすればよいですか？Buy!ボタンがない場合..

ここにリンクがあります

画像へのリンク

ありがとう、

Answer 1

彼らはスプライトの形で背景画像を使用しています。

スプライトは次のとおりです： http： //assets2.grouponcdn.com/images/groupon/common-s587a68dd07.png？L4HgENCa

Answer 2

これは確かにイメージです。しかし、cssを使用することによってのみ可能であることを証明するために、ここにフィドルソリューションがあります：http：//jsfiddle.net/bspbg/

input{
    background-color:rgba(110, 180, 60, 1);
    padding:10px;
    border-radius:40px;
    border-color:white;
    border-width: 3px;
    border-style: solid;
    font-size:2em;
    font-weight:bold;
    color: white;
    margin:20px;
    margin-left: 70px;
    box-shadow:-2px -2px 1px 3px rgba(50, 150, 30,1) inset,5px 5px 5px rgba(255, 255, 255,0.5) inset;
}
.somebg{
    background-color: rgba(100, 200, 230, 1);
    width: 250px;
    height: 105px;
    box-shadow: 0px 0px 40px rgba(1,1,1,0.5) inset;
}

これinputがボタンです。境界線、半径、ボックスシャドウで遊んでください。これで完了です:)

編集：背景のある新しいフィドル

Answer 3

CSSのコマンドを使用してcontent: "<p>Any html you like</p>"、タグ内のコンテンツをレンダリングできます。