<!doctype html>
<html lang="ckb" dir="rtl">
<head>
    <meta charset="UTF-8">
    <title>دووگمەی ڕەنگیی</title>
    <style>
    .dugme {
    padding: 3px 5px;
    border: 1px solid #cdcdcd;
    border-radius: 5px;
    text-align: center;
    margin-bottom: 10px;
    font-weight: 700;
    min-width:200px;
    }
    .zerd{
    background: #FFE082;
    background: -moz-linear-gradient(top, #FFE082 0%, #FFE082 48%, #FFCA28 100%);
    background: -webkit-linear-gradient(top, #FFE082 0%,#FFE082 48%,#FFCA28 100%);
    background: linear-gradient(to bottom, #FFE082 0%,#FFE082 48%,#FFCA28 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FFE082', endColorstr='#FFCA28',GradientType=0 )
    }
    .sur{
    color: #fff;
    background: #a90329;
background: -moz-linear-gradient(top,  #a90329 0%, #ff0000 100%);
background: -webkit-linear-gradient(top,  #a90329 0%,#ff0000 100%);
background: linear-gradient(to bottom,  #a90329 0%,#ff0000 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a90329', endColorstr='#ff0000',GradientType=0 );
    }
    .shin{
    background: #87e0fd;
background: -moz-linear-gradient(top,  #87e0fd 0%, #53cbf1 40%, #05abe0 100%);
background: -webkit-linear-gradient(top,  #87e0fd 0%,#53cbf1 40%,#05abe0 100%);
background: linear-gradient(to bottom,  #87e0fd 0%,#53cbf1 40%,#05abe0 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#87e0fd', endColorstr='#05abe0',GradientType=0 );
    }
    </style>
</head>
<body>
            <div><button class="dugme zerd">دووگمەیەکی زەرد</button></div>
            <div><button class="dugme sur">دووگمەیەکی سوور</button></div>
            <div><button class="dugme shin">دووگمەیەکی شین</button></div>
</body>
</html>