蓝色按钮HTML CSS更改大小

如何在Html中编码长度为50且witdh为50的蓝色按钮？

我真的是个新手

我已经准备好了一个按钮，但我不知道如何改变它的颜色和大小

<button type="button">Click Me!</button>

元素样式有几种方法，它们都使用CSS。最常见的是包含一个具有所有所需样式的CSS文件，但为了这个示例，您可以在HTML中包含一个样式标记。

<style>
  button {
    display: block;
    width: 50px;
    height: 50px;
    background-color: blue;
  }
</style>

注意，我还制作了元素block的显示类型，使我能够操作它的宽度和高度。

<input type="button" style="background-color:blue;width:1330px;" value="click Me">

总结一下，有三种可能：

1.为按钮使用内联样式：

<button type="button" style="display: block; width: 50px;height: 50px; background-color:blue;">Click Me!</button>

2.使用<style>标签设置按钮样式：

<style>
   button {
     display: block;
     width: 50px;
     height: 50px;
     background-color:blue;
   }
</style>

3.将你的风格放在一个外部CSS文件中，并将其包含在HTML的<head>

<link href="path/to/your/file.css" rel="stylesheet" type="text/css" />

注意：

根据情况选择使用哪种方法，对于您的简单案例，您可以使用内联样式。

这是一个简单的片段：

<button type="button" style="display: block; width: 50px;height: 50px; background-color:blue;">Click Me!</button>

一个非常快速的解决方案是像这样内联添加样式：

<button type="button" style="display: block; width: 50px; height: 50px;">Click Me!</button>

相关内容