如何在CSS中创建不同的按钮?

时间:2017-10-20 02:28:35

标签: html css

所以现在我有一个按钮,这就是那个按钮现在的样子:

#include <stdio.h>
#include <stdlib.h>
#include <ctype.h>

int main(void){
    char grade[50];
    float grade2;//int grade2; ?
    int invalid;//flag
    int i;

    printf("Please, insert a grade between 0 and 10.\n");

    do {
        invalid = 0;//false
        printf("Grade: ");fflush(stdout);
        fgets(grade, sizeof grade, stdin);
        for(i = 0; grade[i] && grade[i] != '\n'; ++i){
            if(!isdigit((unsigned char)grade[i])){
                invalid = 1;//It contains illegal characters.
                break;
            }
        }
        if(!invalid){
            grade2 = atof(grade);
            if(grade2 < 0 || grade2 > 10){
                printf("\nPlease, insert a valid value.\n");
                invalid = 1;//Invalid input range
            }
        }
    } while(invalid);
    printf("The grade is: %f\n", grade2);
    printf("Valid value.\n");
    //printf("Restart the program and try again.");//never execute

    system("PAUSE");
}

现在让我们说我想要三个按钮。它们看起来都一样,除了我的蓝色按钮,一个是红色,另一个是黄色,第四个按钮是绿色。如何在css中创建这些新按钮?

3 个答案:

答案 0 :(得分:1)

您可以定义颜色类并将其放入按钮类属性中。

input[type=button] {
    width: 10%;
    font-size: 25px;
    font-weight: bold;
    margin: 0.5%;
}
.blue{
    background: blue;
}
.red{
    background: red;
}
.yellow{
    background: yellow;
}
.green{
    background: green;
}

HTML:

<input type="button" class="red" value="Red button">
<input type="button" class="blue" value="Blue button">
<input type="button" class="green" value="Green button">
<input type="button" class="yellow" value="Yellow button">

答案 1 :(得分:1)

input[type=button] {
    width: 10%;
    font-size: 25px;
    font-weight: bold;
    margin: 0.5%;
}
.red{
  background-color: red;
}
.blue{
  background-color: blue;
}
.yellow{
  background-color: yellow;
}
<input type="button" class="red"/>

<input type="button" class="blue"/>

<input type="button" class="yellow"/>

尝试使用class

答案 2 :(得分:1)

好的,亲爱的,你有不同的方法

第一个

&#13;
&#13;
input[type=button]
	 {
    width: 10%;
    font-size: 25px;
    font-weight: bold;
    margin: 0.5%;
	 }
	 .blue 
	 {
	 	background-color: blue;
	 }
	 .red
	 {
	 	background-color: red;

	 }
	 .yellow
	 {
	 	background-color: yellow;
	 }
	 .green
	 {
	 	background-color: green;
	 }
&#13;
  <input class="blue" type="button" name="">
	<input class="red" type="button" name="">
	<input class="yellow" type="button" name="">
	<input class="green" type="button" name="">
&#13;
&#13;
&#13;

第二个

&#13;
&#13;
input[type=button]
	 {
    width: 10%;
    font-size: 25px;
    font-weight: bold;
    margin: 0.5%;
	 }
&#13;
  <input  type="button" name="" style="background-color: green;">
	<input  type="button" name="" style="background-color: blue;">
	<input  type="button" name="" style="background-color: yellow;">
	<input  type="button" name="" style="background-color: red;">
&#13;
&#13;
&#13;