cssだけで作る、きれいでかつ分かりやすい動きの追加ボタン、削除ボタンです。「+」と「-」の丸形ボタンを上下に配置したものと、左右に配置したものの2種類です。いずれのボタンもhoverすると横に広がり、「+」ボタンは「add」と表示、「-」ボタンは「remove」と表示します。具体的な追加、削除の機能は実装していません。

htmlソース

<div class="icon-wrap">
    <div style="text-align: center;">
        <button class="icon-btn add-btn">
            <div class="add-icon"></div>
            <div class="btn-txt">Add</div>
          </button>
    </div>
    <div style="text-align: center; margin-top: 8px;">
        <button class="icon-btn add-btn">  
            <div class="btn-txt">Remove</div>
        </button>
    </div>
</div>
<div class="icon-wrap">
    <div style="text-align: center;">
        <button class="icon-btn add-btn">
            <div class="add-icon"></div>
            <div class="btn-txt">Add</div>
        </button>
        <button class="icon-btn add-btn">  
            <div class="btn-txt">Remove</div>
        </button>
    </div>
</div>