CSS selector of inner elements

I'm want to select the words "Dashboard", "Attendance", "Marcum" and "Results" and set their color to White.

    <div class="container-fluid">
    <div class="row">
    <div class="col-md-12">


                <div class="fpstartwrap">
                <div class="fpstart">
                    <div class="iconset">

                            <div class="btn btn-secondary">
                                <a role="button" href="https://rafiee.net" title="Dashboard" 
                                   alt="Dashboard" target="_blank">
                                    <div class="navicon" align="center">
                                        <i class="fa fa-3x fa-home"></i>
                                    </div>
                                    Dashboard
                                </a>
                            </div>
                            <div class="btn btn-secondary">
                                <a role="button" href="https://rafiee.net/attendance" 
                                   title="Attendance" alt="Attendance" target="_blank">
                                    <div class="navicon" align="center">
                                        <i class="fa fa-3x fa-user-times"></i>
                                    </div>
                                    Attendance
                                </a>
                            </div>
                            <div class="btn btn-secondary">
                                <a role="button" href="https://rafiee.net/q" title="Marcum" 
                                      alt="Marcum" target="_parent">
                                    <div class="navicon" align="center">
                                        <i class="fa fa-3x fa-calculator"></i>
                                    </div>
                                    Marcum
                                </a>
                            </div>
                            <div class="btn btn-secondary">
                                <a role="button" href="https://rafiee.net/user/" title="Results" 
                                       alt="Results" target="_self">
                                    <div class="navicon" align="center">
                                        <i class="fa fa-3x fa-id-card-o"></i>
                                    </div>
                                    Results
                                </a>
                            </div>


                        
                    </div>
                </div>
                </div>

                    <div class="collapse" id="fpslider">
                        <div class="row">
    <div class="col-md-3">
        <a class="btn btn-primary" href="https://rafiee.net">Rafiee.net</a>
    </div>
    <div class="col-md-3">
        <a class="btn btn-primary" href="https://rafiee.net/attendance">Attendance</a>
    </div>
     <div class="col-md-3">
        <a class="btn btn-primary" href="https://rafiee.net/dailybonus">Daily Bonus</a>
    </div>
     <div class="col-md-3">
        <a class="btn btn-primary" href="https://rafiee.net/q">Marcum Calculator</a>
    </div>
</div>
                    </div>
                <div style="clear:both;"></div>



</div>
</div>
</div>

I tried to do it by :

div a[role="button"] {
color: white;
}

However, since I have other elements with role "Button", they are all changed to white which is undesirable in my case. I only need to target these four words. Is it possible? Any help is appreciated in advance. Thanks