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

Assuntos Gerais
#1

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 [b] dentro de botao:

Cor de link não visitado #FF0000 e visitado #DD0000.
[/b]

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?

#2

Oi amarock,

Acho que se você incluir um sjfiddle fica mais fácil de ajudar.

Joguei o seu CSS lá e criei um com dentro. Só precisei tirar o a {} de dentro de .botao {}, e colocar em .botao a {}

Dá uma olhada se isso ajuda.

http://jsfiddle.net/NeUzV/

Abraços.

#3

kinow, muito obrigado pela sua ajuda, curso tecnologia em sistemas de computação e estou sentindo muita dificuldade agora que estou começando no CSS / JScript.

Meu objetivo é realizar o mesmo procedimento da imagem abaixo:

Segundo seu conselho, fiz um sjfiddle para ficar mais fácil,
Segue:
http://jsfiddle.net/amarock/LavbX/1/

Não deu certo tirar o a {} de dentro de .botao {}, e colocar em .botao a {}

Continua não aparecendo o link dentro dos botões.

Atualmente:

Por favor alguém me ajuda com este novo problema

#4

Opa amarock, imagens quebradas aqui.

Modifiquei seu código só um pouco ó: http://jsfiddle.net/LavbX/7/

Se você usar divs para buttons, na verdade vai ter que implementar o comportamento (ou parte) do button na div. Ou seja, vai ter que colocar borda, sombras, posição do texto, insets, etc etc. Por isso substituí a div por button, vê se ficou bom :slight_smile:

Abraços

#5

Consegui o resultado, muito obrigado kinow!

#6

Opa, bom ter ajudado. Se quiser atualiza o título, colocando [RESOLVIDO] na frente. Assim quem estiver seco pra responder uma pergunta nem abre, e quem tiver dúvida de um problema semelhante já vai seco ver como você resolveu :smiley:

Abraços, boa semana.

#7

​Obrigado pelo alerta kinow

Para quem tiver dúvida de um problema semelhante e está seco 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:

33agk5c.jpg654×526

Abraços!

#8