自己做的一个button

最新推荐文章于 2024-08-14 09:08:45 发布

qq_28585545

最新推荐文章于 2024-08-14 09:08:45 发布

阅读量209

点赞数

分类专栏： html+js+jquery 文章标签： html

html+js+jquery 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
<style>

div
{
width:100px;
height:75px;
background-color:yellow;
border:1px solid black;
}
div#div2
{
transform:rotateY(130deg);
-webkit-transform:rotateY(130deg); /* Safari and Chrome */
-moz-transform:rotateY(130deg); /* Firefox */
}

.mm{
//width:300px;
height:25px;
//line-height: 20px;
border:0;
//border-right-style:none;
//border-bottom-style:none;
//一行不允许两次使用斜杠注释,下面是左下角半圆
//border-bottom-left-radius:2em;
border-radius:8px;
color:#677786;
background-color:#DDE4D8; //双杠注释
margin:-15px;
}

/*单击后的颜色,需要放在前面*/
.mm:focus{
background-color:#B9C0B4;
color:#424F5A;
outline: none;

}

.mm:hover{
background-color:#B9C0B4;
color:#424F5A;

}
/*单击时的状态*/
.mm:active{
background-color:#949891;
color:#131517;

}

</style>
</head>
<body>

<div>你好。这是一个 div 元素。</div>

<div id="div2">你好。这是一个 div 元素。</div>

<p><b>注释：</b> Internet Explorer 和 Opera 不支持 rotateX 方法。</p>

<center>
<button id="btn" class="mm" >按钮</button>
<button id="btn1" class="mm">按钮</button>

<!-可以直接写js语言onClick=""里面->
</center>
</body>

</html>

效果：

原始移到单击离开