[CSS] Tag <a> dentro de class .botao

[amarock]

[RESOLVIDO]CSS - Tag <a> dentro de class .botao

Tenho um arquivo externo .css
Preciso estilizar um botão da seguinte maneira:

.botao :
Largura de 130 pixels, fonte aumentado (larger), negrito, alinhamento centralizado, cor de fundo amarela (yellow)borda de 8px, com sombreado de botão (inset) e na camarela (yellow). Espaço do conteúdo para a borda(padding) de 8px. Margem superior e inferior de 20px. Botãocentralizado em relação a página (DICA: margin-left margin-right com valor auto).

e tag <a> dentro de botao:

Cor de link não visitado #FF0000 e visitado #DD0000.

Tentei da seguinte maneira:

.botao{ width: 130px; font-size: larger; font-weight: bold; background-color: yellow; border-width: 8px; 
box-shadow: inset yellow; padding: 8px; margin-right: auto; margin-left: auto; A: link { color: #FF0000;} A: visited { color: #DD0000; } }

Não deu certo, alguém pode me dar uma luz?

 

[Luxw]

	.botao{ 
		width: 130px;
		font-size: larger;
		font-weight: bold;
		background-color: yellow;
		border-width: 8px;
		box-shadow: inset yellow;
		padding: 8px;
		margin-right: auto;
		margin-left: auto;
	}
	
	.botao:link { 
		color: #FF0000;
	} 
	.botao:visited { 
		color: #DD0000; 		
	}

Assim dá

 

[LuketaD2]

Tenho um arquivo externo .css
Preciso estilizar um botão da seguinte maneira:

.botao :
Largura de 130 pixels, fonte aumentado (larger), negrito, alinhamento centralizado, cor de fundo amarela (yellow)borda de 8px, com sombreado de botão (inset) e na camarela (yellow). Espaço do conteúdo para a borda(padding) de 8px. Margem superior e inferior de 20px. Botãocentralizado em relação a página (DICA: margin-left margin-right com valor auto).

e tag <a> dentro de botao:

Cor de link não visitado #FF0000 e visitado #DD0000.

Tentei da seguinte maneira:

.botao{ width: 130px; font-size: larger; font-weight: bold; background-color: yellow; border-width: 8px; 
box-shadow: inset yellow; padding: 8px; margin-right: auto; margin-left: auto; A: link { color: #FF0000;} A: visited { color: #DD0000; } }

Não deu certo, alguém pode me dar uma luz?

Como você quer que ele apareça ?

Cria assim mano

<button class="botao"><a class="texto"> Texto Aqui </a></button>

Dai você insere as suas propriedades, de um float no botão também. As propriedades da fonte coloque na classe texto.

Ficaria mais ou menos assim

.botao { 	width: 130px;	float:left;	background-color: yellow; 	border-width: 8px; 	box-shadow: inset yellow; 	padding: 8px; 	margin-right: auto; 	margin-left: auto;}	.botao .texto {		font-size: larger; 	font-weight: bold; 		}	.texto: link { color: #FF0000;}	.texto: visited { color: #DD0000; }

 

[Luxw]

Ah, não deu certo aqui.

Não tinha entendido que era pra ter um <a> dentro de um <button>
Só dá pra mudar a cor do texto, mas não tem mais a característica antes de visitar/depois de visitar.

Eu acho que o que o op quer não dá pra fazer

Na verdade teria que ser assim:

.botao { 	
	width: 130px;
	float:left;
	background-color: yellow;
	border-width: 8px;
	box-shadow: inset yellow;
	padding: 8px;
	margin-right: auto;
	margin-left: auto;
}	
		
.botao a {	
	font-size: larger; 
	font-weight: bold;
}	
		
.botao a:link { 
	color: #FF0000;
}	
		
.botao a:visited {
	color: #DD0000; 
}

Mas por alguma razão o link não está sendo visitado, acho que tem que ser <a><button></button></a>, mas aí você perde as características do <a>

Dá pra resolver com Javascript

<button class="botao" onclick="window.location = document.getElementById('link').href;"><a id="link" href="#####"> Texto Aqui </a></button>

 

[amarock]

Primeiramente muito obrigado pela ajuda LuketaD2 e Luxw!

Mas infelizmente não posso fazer em JScript, tem que ser em CSS como nas instrução dadas na imagem abaixo:

A primeira janela refere-se como está no momento, a segunda janela refere-se às instruções e a terceira (inferior) refere-se ao meu código que não está dando certo.

A página tem que ficar igual a imagem abaixo:

Não estou conseguindo estruturar corretamente essa parte de introduzir tag dentro de uma class!!!

 

[Luxw]

Não estão aparecendo as imagens, faz um upload no imageshack, tinypic ou qualquer um desses serviços.

 

[amarock]

​Obrigado pelo alerta Luxw

Consegui resolver usando o código:

.botao {     
    width: 130px; 
    height: 30px;
    background-color: yellow;  
    margin-right: auto; 
    margin-left: auto; 
    border: 5px yellow inset;
    padding: 0 8px;
    color: white;
}


.botao a {
    font-size: larger; 
    font-weight: bold; 
    color: #FF0000;
}


.botao A:link{
        color: #FF0000;
}


.botao A: visited {
        color: #FF00DD;
}

O código abaixo realiza o estilo dos botões conforme imagem abaixo:

Menos um problema, mas surgiu outra dúvida aqui:

Como coloco a tag <p> dentro da class .biscoito ?

Tentei o código:

.biscoito {     
    width: 100%; 
    font-family: tahoma; 
    font-size: larger; 
    text-align: center; 
}


.biscoito p { 
    width: 90%; 
    text-align: justify; 
    margin-right: auto; 
    margin-left: auto; 
}

Mas não está funcionando, você sabe como faça para inserir corretamente esta tag nesta class?

 

[Luxw]

Deveria ser assim mesmo, posso ver como está seu código HTML ?

se <div> tiver a class biscoito por exemplo
o <p> precisa estar dentro desse <div> pra ser afetada pelo modificador .biscoito p

 

[amarock]

Claro, segue o código:

<html><head><title>    Marco Polo - Biscoito da Sorte   </title>
<link rel="stylesheet" type="text/css" href="MarcoPolo.css" />
<script language=“Javascript” src=“MarcoPoloJScript.js”> </script>
</head> 
<body> <img src="auxiliares/MarcoPoloLogo_p.png"  class="logo" /> 
<h1 class="titPag">Biscoito da Sorte<br/><hr  class="barraTitPag" /> 
<br/><br/><br/></h1> 
<div id="biscoito"> 
<p>A hist&oacute;ria do biscoito da sorte inicia-se na &eacute;poca de Genghis Khan que, no final do s&eacute;culo XII, dominou boa parte da 
China</p><p>Os generais Chineses precisavam de uma forma segurade trocar informa&ccedil;&otilde;es. A solu&ccedil;&atilde;o foi esconder 
mensagens num tipo de bolo em forma de meia-lua cujo sabor era detestado pelos 
mong&oacute;is.</p><p>Para comemorar sua vit&oacute;ria, anualmente os 
chinesespassaram a trocar mensagens de felicita&ccedil;&atilde;o da mesma forma em 
que as mensagens secretasforam enviadas, dentro de "bolos da sorte".</p><p>Confira a seguir algumas 
mensagens que podem serencontradas em Biscoitos da Sorte:</p> 
<div id="sorte"> 
<script></script> 
</div> 
<form><input type="button" value="Nova Mensagem"              onClick=" "/></form> 
</div> 
</body></html>

E a página deve ficar igual a seguinte imagem:

Como está atualmente:

 

[Luxw]

Ah sim, é porque você tá usando id="biscoito"

para usar CSS com id é

#biscoito{ ... }

e #biscoito p{ ... }

xP

 

[LuketaD2]

Ah sim, é porque você tá usando id="biscoito"

para usar CSS com id é

#biscoito{ ... }

e #biscoito p{ ... }

xP

Exatamente, tenta fazer isso ai.

 

[amarock]

Perfeito! Muito obrigado Luxw e LuketaD2!