Ithis is wierd, any suggestions?!

HTML-CSS
1

Oh hi I was coding yesterday and made a fancy button, (with no Javascript) and all of a sudden when the browser rendered my object it lies all the way on the top of the webpage and its not centered, the “wierd thing” happened in the ALIGN ITEMS value, it turned purple! heres my coder.

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<link rel="stylesheet" type="text/css" href="fancy-clk.css">
	<title>Document</title>
</head>
<body>
	
<div class="button-container">
	<form action="https://developer.mozilla.org">
		
		<button  class="mozilla">Webmaster  </button>


	</form>





</div>





</body>
</html>

*{

padding: 0;
margin: 0;
border-box: ;
font-family: cursive;



}






.button-container{
display:flex;	
width:100%;
min-height: 100vh
align-items: center;
justify-content: center;
}








.mozilla{
background: none;
appearance: none;
border: none;
outline: none;
cursor: pointer;
padding: 20px 40px;
border-radius: 8px;
color: #212121;
font-size:28px ;
font-weight: 600;
margin: 0 15px;
transition: 0.4s;

}

.mozilla{
#color: #fff;
background-color: #68a0de;
box-shadow: inset 0 -8px 0 0 rgba(0, 0, 0, 0.2);
transition: 0.1s;
text-shadow: 0px 3px rgba(0, 0, 0, 0.2);



}



.mozilla:hover{

box-shadow: inset 0 -6px 0 0 rgba(0, 0, 0, 0.2);


}

.mozilla:active{
box-shadow: inset  0 -1 0 0 rgba(0, 0, 0, 0.2)   ;
text-shadow: 0px 1px  rgba(0, 0, 0, 0.2);


}
2

Please post your actual code. This is even harder to read than a screenshot. Thanks.

3

OHH so you want a better image? like a screenshot?!!

4

No. Please post the actual code instead of any kind of picture.

5

Here is how you write code into the forum

When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

Pre-formatted-text
Pre-formatted-text1356×380 401 KB

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (’).

1 Like
6

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.