Html 如何为多个按钮提供不同的样式，使其成为；行为举止；作为个人_Html_Css_Button

Html 如何为多个按钮提供不同的样式，使其成为；行为举止；作为个人

html css button

Html 如何为多个按钮提供不同的样式，使其成为；行为举止；作为个人,html,css,button,Html,Css,Button,正文{ 背景：url(http://i.imgur.com/LMYkPk3.jpg)无重复中心固定；背景尺寸：封面； } 钮扣{ 显示：内联块；裕度：0 10px 0 0；填充：5px20px；字体大小：15px；字体系列：草书；线高：1.8；外观：无；盒影：无；边界半径：20px； } 按钮：焦点{ 大纲：无； } 第1节扁平按钮{ 颜色：#fff；背景色：透明；文本阴影：-1px 1px#417cb8；边界：无； } section.flat按钮：悬停， sectio

正文{
背景：url(http://i.imgur.com/LMYkPk3.jpg)无重复中心固定；
背景尺寸：封面；
}
钮扣{
显示：内联块；
裕度：0 10px 0 0；
填充：5px20px；
字体大小：15px；
字体系列：草书；
线高：1.8；
外观：无；
盒影：无；
边界半径：20px；
}
按钮：焦点{
大纲：无；
}
第1节扁平按钮{
颜色：#fff；
背景色：透明；
文本阴影：-1px 1px#417cb8；
边界：无；
}
section.flat按钮：悬停，
section.flat button.hover{
背景色：透明；
边框：2倍纯色橙色；
}
section.flat按钮：激活，
section.flat button.active{
背景色：薄荷霜；
文本阴影：-1px 1px#193047；
颜色：黑色；
}


按钮
另一个

您需要执行

，

等操作，因此每个按钮都有一个id。这是预期的行为，因为每个按钮都没有唯一的标识符。你的css告诉它按下每个按钮，而不是一个特定的按钮。

你只需要给不同的按钮添加不同的id，使它们可以单独区分。然后使用这两个ID进行单独的样式设置。我已经修改了你的代码，下面是工作代码--


按钮
另一个
钮扣{
显示：内联块；
裕度：0 10px 0 0；
填充：5px20px；
字体大小：15px；
字体系列：草书；
线高：1.8；
外观：无；
盒影：无；
边界半径：20px；
}
按钮：焦点
{
大纲：无；
}
#btn1{
背景色：#f0f8；
}
section.flat按钮：悬停，
section.flat button.hover{
背景色：透明；
边框：2倍纯色橙色；
}
#btn1：活动，
section.flat button.active{
背景色：薄荷霜；
文本阴影：-1px 1px#193047；
颜色：黑色；
}

我对你的

CSS

做了一些修改，只是想展示一下它是如何工作的。正如您在下面的小提琴中所看到的，两个按钮的背景颜色都不同。干杯

我试着识别它们，但后来它们都变灰了。你能说得更具体些吗。。。我认为仍然缺少css上的smth…你也申请了css吗<代码>#btn-1，

#btn-1:悬停

，等等。如果您不明白，我将立即向您发送jsfiddlei在css中创建的单个按钮设置以及html中的部分。似乎现在作为个人btn工作，但他们不再在一条线上。我试着将它们放在一个div类下，并将display:inline；（不起作用）@lazyboy78

<body>
        <div id="line"></div>

<section class="flat">
<button id = "btn1">button</button>
<button id="btn2">another</button> 

  </section>
</body>
<!--the css-->
button {
display:inline-block;
margin: 0 10px 0 0;
padding: 5px 20px;
font-size: 15px;
font-family: cursive;
line-height: 1.8;
appearance: none;
box-shadow: none;
border-radius: 20px;
    }

   button:focus 
  {
outline: none;
   }
   #btn1 {
       background-color: #f0f0f8;
     }



    section.flat button:hover,
      section.flat button.hover {
     background-color: transparent;
      border: 2px solid orange;
        }

   #btn1:active,
    section.flat button.active {
     background-color: mintcream;
    text-shadow: -1px 1px #193047;
    color: black;
        }