To combine html class in css for easy design?

I am a newbie in web development, I have an HTML document with some classes, however, while designing I came across these This is my HTML doc snippet:

  <button class="roll"><i class="ion-ios-loop"></i><span>Roll dice</span></button>
 <button class="hold"><i class="ion-ios-download-outline"></i><span>Hold</span></button>

and i have written css like this:

.hold span{
    padding-left: 10px;
    transition: .2s;
}
.roll span{
    padding-left: 10px;
    transition: .2s;
}
.roll span:hover{
     padding-left: 20px;
}
.hold span:hover{
    padding-left: 20px;
}

However, i tried to make it shorter like this, it was not working properly:

.hold.roll span{
    padding-left: 10px;
    transition: .2s;
}

.hold.roll span:hover{
     padding-left: 20px;
}

and also like this:

.hold,.roll span{
    padding-left: 10px;
    transition: .2s;
}

.hold,.roll span:hover{
     padding-left: 20px;
}

Is there something which I am missing about CSS ? Thanks, why my other 2 code is not working. ?