spanタグについて

宜しくお願い致します。

下記のコードで分からなくて質問させて頂きます。

下記のHTMLはボタン（アイコン？）を表しているコードで、spanタグが２重で記されているのですが、
これはなぜspanタグを２つにする必要があるのでしょうか。
CSSの関係かと思ったのですが分かりませんでした。

１つのspanタグに（CSSもまとめて）記述する事はできないのでしょうか？
もしspanタグを２重にしている意味が分かるかたいましたら教えて頂けると幸いです。
宜しくお願い致します。

HTML
1  <div class="_reg_btn_holder">
2                                         <p>
3                                             <a href="#" class="ns15-btn_base ns15-btC003">
4                                                 
5                                                    <span class="ns15-btn_inner">
6                                                     <span class="ns15-btn_size003">登録する</span>
7                                              
8                                                 </span>
9                                                 </a>
10                                         </p> 
11</div>
12
13

CSS
1._reg_btn_holder{
2width:450px;
3margin:0 auto;
4}
5
6.ns15-btC003{
7    background: #FF7864;
8}
9.ns15-btn_base {
10    display: block;
11    padding: 1px;
12    border-radius: 4px;
13    text-decoration: none;
14    color: #fff;
15    font-size: 14px;
16    font-weight: bold;
17    text-align: center;
18    transition: all .1s linear;
19    -webkit-transition: all .1s linear;
20}
21.ns15-btC003 .ns15-btn_inner {
22    background: linear-gradient(to bottom, #FF978C 0%,rgba(231, 95, 81, 0) 100%);
23}
24.ns15-btn_inner {
25    display: block;
26    padding: 1px;
27    border-radius: 4px;
28}
29.ns15-btC003 .ns15-btn_inner span {
30    background: #FF6959;
31    color: #fff;
32    background: linear-gradient(to bottom, #FF6959 97%,#E75F51 97%,#E75F51 97%,#E75F51 100%);
33
34}
35.ns15-btn_inner span {
36    display: block;
37    border-radius: 4px;
38    overflow: hidden;
39}
40.ns15-btn_size003 {
41    font-size: 18px;
42    font-weight: bold;
43    height: 65px;
44    line-height: 65px;
45    width: auto;

行動規範の内容に同意します

回答1件

ベストアンサー

そうしないと、複雑なグラデーションが実装できないからですね。

aの背景に

css
1.ns15-btC003 {
2    background: #FF7864;
3}

一つ目のspanが

css
1.ns15-btC003 .ns15-btn_inner {
2    background: linear-gradient(to bottom, #FF978C 0%,rgba(231, 95, 81, 0) 100%);
3}

二つ目のspanが

css
1.ns15-btC003 .ns15-btn_inner span {
2    background: #FF6959;
3    color: #fff;
4    background: linear-gradient(to bottom, #FF6959 97%,#E75F51 97%,#E75F51 97%,#E75F51 100%);
5}