CSS yordamida tugmani bir nechta rang bering

Men shunga o'xshash tugmani ranglashni xohlayman. CSS-ni ishlatishim mumkinmi?

Button shunga o'xshash bo'lishi kerak

1
Ikki tonli fonning CSS yordamida diagonali chiziq bilan bo'linishi mumkin bo'lgan dublikati
qo'shib qo'ydi muallif Tiny Giant, manba
Ikki tonli fonning CSS yordamida diagonali chiziq bilan bo'linishi mumkin bo'lgan dublikati
qo'shib qo'ydi muallif Tiny Giant, manba
maxsus tugma yaratish
qo'shib qo'ydi muallif Mandar Sant, manba
Men yaxshi javob berganga o'xshash boshqa shu kabi boshqa stackoverflow savolini topdim. stackoverflow .com/questions/14739162/& hellip; Yaxshi boshlanish nuqtasi bo'lishi kerak!
qo'shib qo'ydi muallif Ryan Javens, manba
Men yaxshi javob berganga o'xshash boshqa shu kabi boshqa stackoverflow savolini topdim. stackoverflow .com/questions/14739162/& hellip; Yaxshi boshlanish nuqtasi bo'lishi kerak!
qo'shib qo'ydi muallif Ryan Javens, manba

9 javoblar

Siz chiziqli gradientdan foydalanishingiz mumkin.

JSFiddle

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

button {
  height: 50px;
  width: 100px;
  background: linear-gradient(-60deg, red 50%, yellow 50%);
}
<button></button>
</div> </div>
2
qo'shib qo'ydi

Siz chiziqli gradientdan foydalanishingiz mumkin.

JSFiddle

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

button {
  height: 50px;
  width: 100px;
  background: linear-gradient(-60deg, red 50%, yellow 50%);
}
<button></button>
</div> </div>
2
qo'shib qo'ydi

Siz chiziqli gradientdan foydalanishingiz mumkin.

JSFiddle

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

button {
  height: 50px;
  width: 100px;
  background: linear-gradient(-60deg, red 50%, yellow 50%);
}
<button></button>
</div> </div>
2
qo'shib qo'ydi

HTML:

<button id="main"></button>

CSS:

#main {
    width: 200px;
    height: 50px;
    border: none;
    background: linear-gradient(120deg, rgb(255, 0, 144), rgb(255, 0, 144) 55%, rgb(0, 222, 255), rgb(0, 222, 255) 45%);
}

Codepen

1
qo'shib qo'ydi

HTML:

<button id="main"></button>

CSS:

#main {
    width: 200px;
    height: 50px;
    border: none;
    background: linear-gradient(120deg, rgb(255, 0, 144), rgb(255, 0, 144) 55%, rgb(0, 222, 255), rgb(0, 222, 255) 45%);
}

Codepen

1
qo'shib qo'ydi

HTML:

<button id="main"></button>

CSS:

#main {
    width: 200px;
    height: 50px;
    border: none;
    background: linear-gradient(120deg, rgb(255, 0, 144), rgb(255, 0, 144) 55%, rgb(0, 222, 255), rgb(0, 222, 255) 45%);
}

Codepen

1
qo'shib qo'ydi

Shu kabi narsalarni ishlatish

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

.x{
height: 50px;
background: #ff3232;
background: -moz-linear-gradient(-45deg, #ff3232 0%, #ff3030 50%, #282fff 51%, #005dff 100%);
background: -webkit-linear-gradient(-45deg, #ff3232 0%,#ff3030 50%,#282fff 51%,#005dff 100%);
background: linear-gradient(135deg, #ff3232 0%,#ff3030 50%,#282fff 51%,#005dff 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff3232', endColorstr='#005dff',GradientType=1 );
}
<div class="x">
</div>
</div> </div>
0
qo'shib qo'ydi

Shu kabi narsalarni ishlatish

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

.x{
height: 50px;
background: #ff3232;
background: -moz-linear-gradient(-45deg, #ff3232 0%, #ff3030 50%, #282fff 51%, #005dff 100%);
background: -webkit-linear-gradient(-45deg, #ff3232 0%,#ff3030 50%,#282fff 51%,#005dff 100%);
background: linear-gradient(135deg, #ff3232 0%,#ff3030 50%,#282fff 51%,#005dff 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff3232', endColorstr='#005dff',GradientType=1 );
}
<div class="x">
</div>
</div> </div>
0
qo'shib qo'ydi

Shu kabi narsalarni ishlatish

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

.x{
height: 50px;
background: #ff3232;
background: -moz-linear-gradient(-45deg, #ff3232 0%, #ff3030 50%, #282fff 51%, #005dff 100%);
background: -webkit-linear-gradient(-45deg, #ff3232 0%,#ff3030 50%,#282fff 51%,#005dff 100%);
background: linear-gradient(135deg, #ff3232 0%,#ff3030 50%,#282fff 51%,#005dff 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff3232', endColorstr='#005dff',GradientType=1 );
}
<div class="x">
</div>
</div> </div>
0
qo'shib qo'ydi