CSS Button | CSS Button Orange Color Classes | Part 03

CSS Button Color Classes

Overview:

More than 10 button orange color classes. Just for your convenience, we develop these color classes. Copy below classes and paste in .css file and then link this file with your project. For amazing tips and tricks please follow us.   

Orange

Orange Button

Classes

.btn-orange-0

{

    background-color: rgb(255,152,0);

    padding: 10px 10px;

    color: white;

    margin: 1%;

    width: 10%;

    border: none;

    border-radius: 10px;

}

.btn-orange-50

{

    background-color: rgb(255,243,224);

    padding: 10px 10px;

    margin: 1%;

    width: 10%;

    border: none;

    border-radius: 10px;

}

.btn-orange-100

{

    background-color: rgb(255,224,178);

    padding: 10px 10px;

    color: white;

    margin: 1%;

    width: 10%;

    border: none;

    border-radius: 10px;

}

.btn-orange-200

{

    background-color: rgb(255,204,128);

    padding: 10px 10px;

    color: white;

    margin: 1%;

    width: 10%;

    border: none;

    border-radius: 10px;

}

.btn-orange-300

{

    background-color: rgb(255,183,77);

    padding: 10px 10px;

    color: white;

    margin: 1%;

    width: 10%;

    border: none;

    border-radius: 10px;

}

.btn-orange-400

{

    background-color:rgb(255,167,38);

    padding: 10px 10px;

    color: white;

    margin: 1%;

    width: 10%;

    border: none;

    border-radius: 10px;

}

.btn-orange-500

{

    background-color: rgb(255,152,0);

    padding: 10px 10px;

    color: white;

    margin: 1%;

    width: 10%;

    border: none;

    border-radius: 10px;

}

.btn-orange-600

{

    background-color: rgb(251,140,0);

    padding: 10px 10px;

    color: white;

    margin: 1%;

    width: 10%;

    border: none;

    border-radius: 10px;

}

.btn-orange-700

{

    background-color: rgb(245,124,0);

    padding: 10px 10px;

    color: white;

    margin: 1%;

    width: 10%;

    border: none;

    border-radius: 10px;

}

.btn-orange-800

{

    background-color: rgb(239,108,0);

    padding: 10px 10px;

    color: white;

    margin: 1%;

    width: 10%;

    border: none;

    border-radius: 10px;

}

.btn-orange-900

{

    background-color: rgb(230,81,0);

    padding: 10px 10px;

    color: white;

    margin: 1%;

    width: 10%;

    border: none;

    border-radius: 10px;

}

.btn-orange-a

{

    background-color: rgb(255,209,128);

    padding: 10px 10px;

    color: white;

    margin: 1%;

    width: 10%;

    border: none;

    border-radius: 10px;

}

.btn-orange-b

{

    background-color: rgb(255,171,64);

    padding: 10px 10px;

    color: white;

    margin: 1%;

    width: 10%;

    border: none;

    border-radius: 10px;

}

.btn-orange-c

{

    background-color: rgb(255,145,0);

    padding: 10px 10px;

    color: white;

    margin: 1%;

    width: 10%;

    border: none;

    border-radius: 10px;

}

.btn-orange-d

{

    background-color: rgb(255,109,0);

    padding: 10px 10px;

    color: white;

    margin: 1%;

    width: 10%;

    border: none;

    border-radius: 10px;

}