how to change the background color size in a button?

Question

I designed some button like this:

however I couldn't change the size of background-color: #428bca as my design in css. Is any way I can change the size of background color in CSS not using background-image?

Please see the simple example here:

 <button class="btn-modify">
    Primary
    </button>

    .btn-modify {
     width: 286px;
     padding: 10px;
     background-color:  #428bca;
     }

https://jsfiddle.net/zichenma/f8hjm0Lc/

Thank you so much in advance!

Answer 1

Yes if assumed right then you want this i.e half background is of another color or another half of is another color .. and you can achieve with this code

 background: repeating-linear-gradient(#0e88be, #0e88be 49.9%, #1e90ff 50.1%, #1e90ff 100%);