Html 调整按钮的大小

我有一个“按钮”，我希望在整个网站中都使用它，但根据

按钮在网站中的位置，我希望它以不同的大小显示

在我的HTML中，我尝试过（但不起作用）：

我假设，如果每次我调用这个
类
时，我都可以传入一个大小，嘿，presto！。。。。但不是

通过添加宽度和高度（我称之为
按钮）
类
似乎对它的大小没有任何影响。有人知道我怎么做吗？如果我将宽度和高度放在
CSS
中，则
按钮的大小将在任何地方都相同。
使用内联样式：

<div class="button" style="width:60px;height:100px;">This is a button</div>

这是一个按钮

不应直接使用“宽度”和“高度”属性，如果要使用内联样式，请使用样式属性，如
style=“some css here”
：

这是一个按钮

但是，请注意，通常应避免使用内联样式，因为它会使维护和样式更新成为一场噩梦。就我个人而言，如果我有一个像您这样的按钮样式，但又想应用不同的大小，我会使用多个css类来调整大小，如下所示：

<div class="button" style="width:60px;height:100px;">This is a button</div>

<div class="button small">This is a button</div>


。按钮{
背景色：#000000；
颜色：#FFFFFF；
填充：10px；
边界半径：10px；
-moz边界半径：10px；
-webkit边界半径：10px；
利润率：10px
}
.小型btn{
宽度：50px；
高度：25px；
}
.中等btn{
宽度：70px；
高度：30px；
}
.大btn{
宽度：90px；
高度：40px；
}
这是一个大按钮
这是一个中号按钮
这是一个小按钮
如果要为按钮内联调用不同的大小，您可能会这样做：

<div class="button" style="width:60px;height:100px;">This is a button</div>

<div class="button small">This is a button</div>

只需为您想要的每种大小创建类。这样，您仍然可以使用样式表，以防一次更改所有小按钮的大小。
另一种选择是允许您在一个标记中有多个类。考虑：

 <div class="button big">This is a big button</div>
 <div class="button small">This is a small button</div>

等等。
试试这个可调整大小的按钮

<button type="submit me" style="height: 25px; width: 100px">submit me</button>

提交给我
如果要以不同的宽度显示，为什么要使用“内联宽度和高度”属性此方法效果特别好，因为内联样式会覆盖CSS中定义的样式。对于第二个选项，+1。分离你的风格并使它们在整个网站上保持一致是很好的。但是，我可能会使您的“size”类
.button变小
，并使您的HTML属性
class=“button button small”
.small
有点过于通用。你的“子类”应该和你的“超类”有一些联系。请看我对正确使用的评论。哇。当我输入这一个时，贴出了三个几乎相同的答案。这对于独立验证来说怎么样？我还以为你们都在模仿我……）但是，是的，很高兴看到我们都同意这一点！在CSS文件中组合这些类是不必要的，事实上，如果不这样做，效果会更好。例如，如果你不仅有
.button
，而且还有
.submit
或
.purchase
这些按钮，那么你就可以对它们中的每一个应用
.medium btn
，而不需要重复代码。另外，对于一个写得好的回答，+1是一个很好的观点——我有时对CSS有点冗长。在某种程度上，这取决于你打算如何使用它，但总的来说——在这种情况下——我认为你的观点是适用的。你确定没有办法回答这个问题而不要求OP下载一个看起来非常灵活的zip吗？只有链接的答案不被认为是这个网站的合适答案。这个问题到底是如何调整大小的？
 .button {
     /* all your common button styles */
 }

 .big {
     height: 60px;
     width: 100px;
 }
 .small {
     height: 40px;
     width: 70px;
 }

<button type="submit me" style="height: 25px; width: 100px">submit me</button>