Click here to Skip to main content
15,885,757 members
Please Sign up or sign in to vote.
1.00/5 (2 votes)
See more:
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<link rel="stylesheet" type="text/css" href="formulario.css" media="">
	<title>cadastro</title>
</head>
<body>

<div>
	<h1 id="titulo">Cadastro de DEVs</h1>
	<p id="subtitulo">complete suas informaçoes</p>
	<br>
</div>

	<form>
		<fieldset class="grupo">
			<div class="campo">
				<label for="nome">  nome</label>
				<input type="text" name="nome" id="nome" required> 
			</div>
			<div class="campo">
				<label for="sobrenome"> sobrenome</label>
				<input type="text" name="sobrenome" id="sobrenome" required>
				
			</div>
		</fieldset>
			<div class="campo">
				<label for="email">Email</label>
				<input type="email" name="Email" id="email" required>
			</div>

			<div class="campo">

				<label>De qual lado da apicação você dessenvolve</label>
				<label>
					<input type="radio" name="devweb" value="Frontend" checked>Frond-end
				</label>
				<label>
					<input type="radio" name="devweb" value="Backend">Back-end
				</label>
				<label>
					<input type="radio" name="devweb" value="Fullstack">Full stack
				</label>
			</div>

			<div class="campo">
				<label for="Senioridade"> Senioridade</label>
				<select id=" Senioridade">
						<option selected disabled value="">Selecione </option>
					<option>Junior</option>
					<option>Pleno</option>
					<option>Senior</option>
				</select>
			</div>
			<fieldset class="grupo">
				<div id="check">
					<label> Selecione as tecnologias que utiliza</label><br><br>
					<input type="checkbox" id="teenologia1" name="tecnologia1" value="html">
					<label for="tecnologia1">HTML</label>
					<input type="checkbox" id="teenologia2" name="tecnologia2" value="CSS">
					<label for="tecnologia2">CSS</label>
					<input type="checkbox" id="teenologia3" name="tecnologia3" value="javascript">
					<label for="tecnologia3">JavaScript</label>
					<input type="checkbox" id="teenologia4" name="tecnologia4" value="PHP">
					<label for="tecnologia4">PHP</label>
					<input type="checkbox" id="teenologia5" name="tecnologia5" value="C#">
					<label for="tecnologia5">C#</label>
					<input type="checkbox" id="teenologia6" name="tecnologia6" value="python">
					<label for="tecnologia6">Python</label>
					<input type="checkbox" id="teenologia7" name="tecnologia7" value="Java">
					<label for="tecnologia7">Java</label>
				</div>
			</fieldset>
				<div class="campo">
					<br>
					<label for="experiencia"> Conte um pouco da sua histoiria</label>
					<textarea row="6" style="width: 26em" id="experiencia" name="experiencia"></textarea>
					
				</div>
					
						<button id="btn" type="submit" onsubmit="">Concluído</button> 
		</form>
	</body>
</html>






<--! CSS PART-->
*{
	margin: 0;
	padding: 0;
}

#titulo{
	font-family: sans-serif;
	color: #380B61;
	margin-left: 7%;
}

#subtitulo{
	font-family: sans-serif;
	color: #380B61;
	margin-left: 10%;
}
#check{
	display: inline-block;
}

fieldset{
	border: 0;

}
body{
	background-color:#f0f8ff;
	font-family: sans-serif;
	font-size: 1em;
	color: #59429D;
	margin-left: 36%;
	margin-top: 2%;
	justify-content: center;

}
input, select, textarea,button{
	border-radius:  5px;
}

.grupo:before, .grupo:after{
	display: table;
}
.grupo:after{
	clear: both;
}
.campo{
	margin-bottom: 1em;
}
.campo label{
	margin-bottom: 0.2em;
	color: #59429d;
	display: block ;
}
fieldset.grupo .campo{
	float: left;
	margin-right: 1em;
}
.campo input[type="text"}, .campo input[type="email"], .campo select, .campo textarea{
	padding: 0.2em;
	border: 1px solid #59429d;
	box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2);
	display: block;
}
.campo select option{
	padding-right: 1em;
}

.campo input:focus, .campo select:focus, .campo textarea:focus{
	background: #E0E0F8;
}

.botao {
    font-size: 1.2em;
    background: #59429d;
    border: 0;
    margin-bottom: 1em;
    color: #ffffff;
    padding: 0.2em 0.6em;
    box-shadow: 2px 2px 2px rgba(0,0,0,0.2);
    text-shadow: 1px 1px 1px rgba(0,0,0,0.5);
    position: absolute;
    top: 90%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%)
}
.botao:hover {
    background: transparent;
    box-shadow: inset 2px 2px 2px rgba(0,0,0,0.2);
    text-shadow: none;
}

.botao, select{
    cursor: pointer;
}


What I have tried:

my button dont change i have tried so much forms to change and i dont find one soluction, any can help me to see where i'm going wrong, sorry for my bad english im brazilian
Posted
Updated 16-Aug-21 6:29am
Comments
SeeSharp2 16-Aug-21 12:16pm    
What do you mean by "my button dont change?"

1 solution

Assuming I understand the Portugese words.
Your button needs to use the class defined in your CSS (i.e. "botao"), thus:
HTML
<button id="btn" class="botao" type="submit" onsubmit="">Concluído</button>
 
Share this answer
 

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900