Button styling questions

MDN Learn
#1

@chrisdavidmills I’m on the button task and it makes a really ugly outline blue border every time it’s being selected (i’m now on Thimble since I’m on travelling with my sister’s computer! he; really great platform!). I’ve read a little bit and know that’s for accessibilities issues but give would prefer making my own designs for them and could not get rid of it with any of the suggested codes. Could you give a hint? Thanks agaaaaain! hehe

"Mozilla splash page" assessment
#2

Hi!

I am assuming you’re talking about the default focus borders given to links when you tab through them? As described in:

?

If so, you can get rid of these / customise the styling of them using the outline property, for example

outline: none

or

outline: 2px dotted red
#3

Morning Chris! (@chrisdavidmills; morning at least here! he) . It’s not a link’s border but the box I’m making. When I select it, it gets this blue border. Tell me if you see it here in the picture.
Could be just some sort of selecting thing in Thimble but already happen to me in chrome and firefox when styling other exercises. (https://thimbleprojects.org/maurodibert/371179/):

ugly border

p/d: the button it’s not cool yet! hehe

#4

Ummmm, no, I can’t see the blue border on this - sorry! It shouldn’t get it anyway - it is a paragraph, not a link or form element (so won’t get it by default - <p>s aren’t tabbable).

1 Like
#5

And also Chris (@chrisdavidmills) and sorry for the messy questions today!

  1. how can I center it responsively both vertically and horizontally? I’ve also read a bit about it an seem to be various ways but non one convention. Is there any correct way? Because I really love to center things!!! hehe

  2. I’ve just play changing the typo for “cool” and wanted everything centered. (I’ve still did’t read enough to look for the way!). I’ve done it like this (at the bottom almost):

p {
width: 400px;
height: 100px;
text-align: center;
font-size: 2.5rem; /* I’ve setup the entire html font to 10px so i can make it easier to use rems units */
line-height: 2;
background-color: #ff0000;
background-image: linear-gradient(to top left, rgba(0,0,0,0) 20%, rgba(0,0,0,0.3));
color: #ff0000;
font-weight: 700;
padding: 2rem;
margin: 200px auto;
text-shadow: 0px 0px 3px #000000, 1px 1px 8px #34342a;
border-radius: 7px;
border: 1px solid #8e0909;
box-shadow: inset 1px 1px 3px #797972, inset -1px -1px 5px #292926, 2px 2px 10px rgba(0, 0, 0, 0.81), -1px -1px 3px rgba(0,0,0,0.5), inset 3px 3px 3px rgba(255,255,255,0.3);

}

p:hover {
color: white;
transition: 1s all;
font-size: 2.7rem;
box-shadow: inset 1px 1px 3px #e6e60a, inset -1px -1px 5px #ebeb0c, 0px 0px 4px rgba(16, 16, 15, 0.81), 0px -0px 2px rgba(114, 114, 110, 0.5), inset 3px 3px 3px rgba(255,255,255,0.3), inset -1px -1px 5px black;
background-image: linear-gradient(to top left, rgba(0,0,0,0) 20%, rgba(0,0,0,0.3)), linear-gradient(to bottom right, rgba(0,0,0,0.1) 30%, rgba(132, 7, 7, 0.9));
border: none;
}

a {
font-family: Amatic SC;
font-size: 5rem;
vertical-align:sub;
padding: 0px 5px 0px 5px;
text-decoration: none;
color: inherit;
}

a:hover {
color: yellow;
transition: 2s all;
}

https://thimbleprojects.org/maurodibert/371179/

#6

I know! It’s wired but for me that I know almost zero, everything it’s wired! hehe. I’ve changed the colors and it’s easier to discover it here but don’t matter at all and thanks again!

blue border