按钮CSS效果悬停并单击

这与设计无关。 这是一个现成的各种效果代码和详细的评论。

将来,这些效果可以应用于任何设计理念,并创建一个互联网上没有其他人拥有的原始按钮。

以下所示的所有按钮均有效。 选择您喜欢的选项。

要快速查看代码,您喜欢的按钮,请单击按钮旁边的“代码”链接。

悬停时:

梯度 代码

大量涌入 代码

变色 代码

弹出来 代码

失真 代码

多色框架 代码

3D按钮 代码

文本旋转的外观 代码

从深处出现的文字 代码

图片的外观 Код

当你按:

链接中的红色按钮 代码

 

带指示灯的按钮 代码

 

关键 代码

 

梯度


<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8" />
<title>CSS按钮的效果</title>
<style>
.one { /* 按钮外观 */
color: #524E49; /* 文字颜色 */
background: #fdeaa8 ; /* 背景颜色 */
padding: 10px; /* 按钮边框的最小文本缩进。 */
font-size: 20px; /* 文字大小 */
border-radius: 5px; /* 角半径 */
box-shadow: 0px 1px 3px; /* 影子 */
}
.one:hover { /* 悬停变换 */
background-image: radial-gradient(ellipse farthest-corner at 50% 50%, #fdeaa8,#777); /* 径向渐变,从中心到边缘的颜色过渡 */
}
</style>
</head>
<body>

<button class="one" onclick="location.href='#';">Кнопка</button>
</body>
</html>

大量涌入


<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8" />
<title>CSS按钮的效果</title>
<style>
.two { /* 按钮外观 */
color: #524E49; /* 文字颜色 */
background: #fdeaa8 ; /* 背景颜色 */
padding: 10px; /* 块边框的内部文本缩进。 定义按钮大小 */
font-size: 20px; /* 文字大小 */
border-radius: 5px; /* 角半径 */
box-shadow: 0px 1px 3px; /* Т影子ень */
position: relative; /* 相对定位,用于设置洪水的绝对定位 */
}
.two:before {
content:'';
position: absolute; /* 绝对定位 */
top: 0px; /* 块边界上的位置 */
left: 0px;
width: 100%; /* 边框宽度 */
height: 0px; /* 高度为0,因此不可见 */
background: rgba(148,144,143,0.4); /* 背景颜色*/
border-radius: 5px;
transition: all 0.5s ease-out; /* 动画。运动。 所有属性(全部)在0.5秒内转换,快速开始并在结束时减速(缓出) */
}
.two:hover:before {
height: 42px; /* 流量的高度等于按钮的高度。 */
}
</style>
</head>
<body>

<button class="two" onclick="location.href='#';">Кнопка</button>
</body>
</html>

变色


<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8" />
<title>CSS按钮的效果</title>
<style>
.three { /* 按钮外观 */
color: #524E49; /* 文字颜色 */
background: #fdeaa8; /* 背景颜色 */
padding: 10px; /* 从边框缩进文本 - 定义按钮的大小。 */
font-size: 20px; /* 文字大小 */
border-radius: 5px; /* 圆角 */
box-shadow: 0px 1px 3px; /* 影子 */
}

.three:hover {
background: rgba(0,0,0,0);/* 更改背景颜色 */
color: #3a7999; /* 文字颜色*/
box-shadow: inset 0 0 0 3px #3a7999; /* 改变阴影 */
}
</style>
</head>
<body>
<button class="three" onclick="location.href='#';">Кнопка</button>
</body>
</html>

弹出来


<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8" />
<title>CSS按钮的效果</title>
<style>
/* 按钮外观 */
.elementy {
color: #524E49; /* 文字颜色 */
background: #fdeaa8; /* 背景颜色 */
padding: 10px; /* 从边框缩进文本 */
font-size: 20px; /* 文字大小 */
border-radius: 5px; /* 圆角 */
box-shadow: 0px 1px 3px; /* 影子 */
/* 设置动画(移动)。 对于所有动作(全部)动作时间(0.8秒)动作方向(cubic-bezier(0.165,0.84,0.44,1)) */
-webkit-transition: all 0.8s cubic-bezier(0.165, 0.84, 0.44, 1);
transition: all 0.8s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.elementy:hover {
-webkit-transform: translate(10px);
transform: translate(10px);
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5) /* 改变阴影 */
}
</style>
</head>
<body>
<button class="elementy" onclick="location.href='#';">Кнопка</button>
</body>
</html>

失真


<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8" />
<title>CSS按钮的效果</title>
<style>
/* 按钮外观 */
.five {
color: #524E49; /* 文字颜色 */
background: #fdeaa8; /* 背景颜色 */
padding: 10px; /* 填充 */
font-size: 20px; /* 文字大小 */
border-radius: 5px; /* 圆角 */
box-shadow: 0px 1px 3px; /* 影子 */
transition: all 500ms ease-out;
}
.five:hover {
transform: skew(10deg);
}
</style>
</head>
<body>
<button class="five" onclick="location.href='#';">Кнопка</button>
</body>
</html>

多彩的框架


<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8" />
<title>CSS按钮的效果</title>
<style>
/* 按钮外观 */
.six {
color: #524E49; /* 文字颜色 */
background: #fdeaa8; /* 背景颜色 */
padding: 10px;
font-size: 20px; /* 文字大小 */
border-radius: 5px; /* 圆角 */
box-shadow: 0px 1px 3px; /* 影子 */
transition: all 500ms ease-out;
}
.six:hover {
box-shadow: 0px 0px 0px 2px #f90914,
0px 0px 0px 7px #a7f9c9,
0px 0px 0px 9px #f90914,
0px 0px 5px 10px #ff4d00;
}
</style>
</head>
<body>
<button class="six" onclick="location.href='#';">Кнопка</button>
</body>
</html>

3D按钮


<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8" />
<title>CSS按钮的效果</title>
<style>
/* 按钮外观 */
.seven {
color: #524E49; /* 文字颜色 */
background: #fdeaa8; /* 背景颜色 */
padding: 10px; /*文本缩进边框 */
font-size: 20px; /* 文字大小 */
border-radius: 5px; /* 圆角 */
box-shadow: 0px 1px 3px; /* 影子 */
position: relative;
transition: all 500ms ease-out; /* Задаём анимацию с временем выполнения 500ms */
transform-style: preserve-3d;
}
.seven:after {
content: 'Кнопка';
position: absolute; /* 绝对定位 */
top: -50%;
left: 0px;
width: 100%; /* 宽度 */
background: #fdeaa8; /* 背景颜色 */
border-radius: 5px; /* 圆角 */
box-shadow: 0px 1px 3px; /* 影子 */
transform-origin: bottom;
transform: rotateX(90deg);
}

.seven:hover {
transform-origin: bottom;
transform: rotateX(-90deg);
}
</style>
</head>
<body>
<button class="seven" onclick="location.href='#';">Кнопка</button>
</body>
</html>

旋转文字的外观


<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8" />
<title>CSS按钮的效果</title>
<style>
.eight {
background: radial-gradient(ellipse farthest-corner at 50% 50%, #fdeaa8,#444);
background: -webkit-radial-gradient(ellipse farthest-corner at 50% 50%, #fdeaa8,#444); /* 背景颜色 */
width: 90px; /* 宽度 */
height: 40px; /* 高度 */
padding: 10px; /* 填充 */
border-radius: 5px; /* Закругление углов */
box-shadow: 0px 2px 4px; /* 影子 */
display: inline-block; /* 内置项目 */
position: relative; /* 相对定位,用于其他元素的绝对定位 */
text-decoration: none; /* 我们删除下划线 */
}
.eight:after {
width: 80%; /* 宽度 */
color: red; /* 文字颜色 */
font-family: 'Lucida Console'; /* 文字字体 */
font-size: 18px; /* 文字大小 */
text-align: center;
content: attr(title);
display: block;
opacity: 0; /* 无形 */
position: absolute;
top: 50%;
-webkit-transform-origin: 50% 0%;
transform-origin: 50% 0%;
-webkit-transition: all 550ms ease-in-out;
transition: all 550ms ease-in-out;
-webkit-transform: scale(0) rotate(-360deg) translateY(-50%);
transform: scale(0) rotate(-360deg) translateY(-50%);
z-index: 3; /* 在所有元素之上 */
}
.eight:hover:after {
opacity: 1; /* 可见 */
-webkit-transform: scale(1) rotate(0deg) translateY(-50%);
transform: scale(1) rotate(0deg) translateY(-50%);
}
</style>
</head>
<body>
<button class="eight" title="knopka" ></button>
</body>
</html>

从深处出现的文字


<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8" />
<title>CSS按钮的效果</title>
<style>
.nine {
background: radial-gradient(ellipse farthest-corner at 50% 50%, #fdeaa8,#444);
background: -webkit-radial-gradient(ellipse farthest-corner at 50% 50%, #fdeaa8,#444); /* 背景颜色 */
width: 90px; /* 相对定位,用于出现文本的绝对定位 */
height: 40px; /* 高度 */
padding: 10px; /* 填充 */
border-radius: 5px; /* 圆角 */
box-shadow: 0px 2px 4px; /* 影子 */
display: inline-block; /* 内置项目 */
position: relative; /* 相对定位,用于出现文本的绝对定位 */
text-decoration: none; /* 我们删除下划线 */
}
.nine:after {
width: 80%; /* 元素宽度 */
color: red; /* 文字颜色 */
font-family: 'Lucida Console'; /* 文字字体 */
content: attr(title); /* 文本取自title属性。 */
display: block; /* 块元素 */
font-size: 18px; /* 文字大小 */
text-align: center; /* 中心文字对齐 */
opacity: 0; /* 无形 */
position: absolute; /* 绝对位于父块的中心。 */
top: 50%;
-webkit-transform-origin: 50% 0%;
transform-origin: 50% 0%;
-webkit-transform: scale(0) translateY(-50%);
transform: scale(0) translateY(-50%); /* 缩放0并移回深度 */
-webkit-transition: all 550ms ease-in-out;
transition: all 550ms ease-in-out; /* 动画。 对于所有元素(全部),持续时间为550毫秒,开始和结束缓慢(易于进出) */
z-index: 3; /* 在所有元素之上 */
}
.nine:hover:after {
opacity: 1; /* 可见 */
-webkit-transform: scale(1) translateY(-50%);
transform: scale(1) translateY(-50%);
}
</style>
</head>
<body>
<button class="nine" title="knopka" ></button>
</body>
</html>

图片的外观


<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8" />
<title>CSS按钮的效果</title>
<style>
.ten {
color: #524E49; /* 文字颜色 */
background: #F7E09C; /* 背景颜色 */
padding: 10px 35px; /* 填充 */
font-size: 20px; /* 文字大小 */
border-radius: 5px; /* 圆角 */
box-shadow: 0px 1px 3px; /* 影子 */
position: relative; /* 绝对图像定位的相对定位 */
}
.ten img {
position: absolute; /* 绝对定位 */
top: 7px; /* 在中间 */
left: -30px; /* 我们移出按钮 */
transition: all 200ms ease; /* 外观动画。 动画时间200毫秒 */
}
/* 悬停效果 */
.ten:hover img {
left: 5px; /* 将图像返回到按钮 */
}
</style>
</head>
<body>
<!--Картинка размещается внутри кнопки-->
<button class="ten" onclick="location.href='#';"><img src="images/Animation.gif">Кнопка</button>
</body>
</html>

红色按钮


CSS
.tower {
position: relative; /* 相对定位外壳,用于其他元件的绝对定位 */
}
.round {
position: absolute; /* 绝对定位在shell上。 在这种情况下,可以省略位置。 */
width: 70px; /* 宽度 */
height: 70px; /* 高度 */
border: 4px solid hsl(5, 40%, 70%);
border-radius: 50%/50%;
background: linear-gradient(top, hsl(0, 90%, 90%), hsl(0, 100%, 50%) 80%);
background: -webkit-linear-gradient(top, hsl(0, 90%, 90%), hsl(0, 100%, 50%) 80%); /* 背景颜色是线性渐变。 颜色以hsl格式设置,但可以以Web中可用的任何格式设置 */
сursor: pointer;
transform: rotate(30deg);
}

.round:active {
width: 69px;
height: 69px;
box-shadow: 0 0 hsl(5, 60%, 60%); /* 减少阴影 */
border: 3px solid hsl(5, 40%, 70%);
background: linear-gradient(top, hsl(0, 90%, 90%), hsl(0, 100%, 50%) 90%);
background: -webkit-linear-gradient(top, hsl(0, 90%, 90%), hsl(0, 100%, 50%) 90%);
}
HTML
<div class="tower">
<!--Вместо кнопки (buttom) используется ссылка (a)-->
<a class="round" href="*"></a>
</div>

带指示灯的按钮


CSS

.switch {
width: 70px; /* 宽度 */
height: 70px; /* 高度 */
position: relative;
cursor: pointer;
}
.dot {
position: absolute; /* 我们绝对相对于shell定位。 */
top: 7%;
left: 7%;
width: 70px; /* 宽度 */
height: 70px; /* 高度 */
border-radius: 50%; /* Делаем круг */
background: hsl(0, 0%, 90%); /* 背景颜色 */
box-shadow: /* 多层阴影,外层和内层 */
0 3px 5px hsl(0, 0%, 75%),
inset 0 1px 0 hsl(0, 0%, 95%),
inset 0 -5px 5px hsl(0, 0%, 75%),
inset 0 5px 5px hsl(0, 0%, 95%)
;
}
.circ {
position: absolute; /* 我们绝对相对于内部中心的壳体定位 */
top: 0;
left: 0;
width: 82px; /* 宽度 */
height: 82px; /* 高度 */
border-radius: 50%;
background: linear-gradient(#ccc, #fff);
background: -webkit-linear-gradient(#ccc, #fff); /* 背景颜色 - 线性渐变 */
box-shadow: /* 多层内阴影 */
inset 0 2px 1px hsl(0, 0%, 75%),
inset 0 -2px hsl(0, 0%, 75%)
;
}
/* 指标 - 伪元素 */
.switch .dot:before {
content: "";
position: absolute; /* 绝对位于中心位置。 */
left: 40%;
top: 40%;
width: 20%; /* 宽度 */
height: 20%; /* 高度 */
border-radius: 50%;
background: radial-gradient(#fff, #333);
background: -webkit-radial-gradient(#fff, #333); /* 背景颜色 - 径向渐变 */
}
.switch:active .dot:before {
content: "";
background: radial-gradient(#fff, #02A829);
background: -webkit-radial-gradient(#fff, #02A829);
}
.switch:active .dot {
background: radial-gradient(#fff, #ccc);
background: -webkit-radial-gradient(#fff, #ccc); /* 更改内圈的背景颜色 */
width: 69px;
height: 69px;
}
HTML
<!--Оболочка-->
<div class="switch">
<!--Наружный круг-->
<div class="circ">
<!--Внутренний круг-->
<span class="dot"></span>
<!--Ссылка для адреса перехода-->
<a href=""></a>
</div>
</div>

关键


CSS
.switch1 {
width: 75px;
height: 45px;
position: relative;
cursor: pointer;
}
.dot1 {
position: absolute;
top: 7%;
left: 7%;
display: block;
width: 75px;
height: 45px;
border-radius: 7px;
background: linear-gradient(hsl(0, 0%, 90%), hsl(0, 0%, 96%));
box-shadow: -3px 5px hsl(0, 0%, 75%),
1px -2px hsl(0, 0%, 75%),
inset 0 0px 5px hsl(0, 0%, 95%),
inset 0 -1px 5px hsl(0, 0%, 95%)
;
z-index: 1;
}
.circ1 {
display: block;
position: absolute;
width: 87px;
height: 57px;
top: 0;
left: 0;
background: linear-gradient(hsl(0, 0%, 96%), hsl(0, 0%, 90%));
box-shadow:
inset 0 1px 1px hsl(0, 0%, 95%),
inset 0 -1px 1px hsl(0, 0%, 95%)
;
}
.dot1:before {
content: "Enter";
color: hsl(0, 0%, 60%);
position: absolute;
left: 20%;
top: 15%;
font-size: 20px;
}
.switch1:active .dot1:before {
content: "Enter";
}
.switch1:active .dot1 {
background: radial-gradient(hsl(0, 0%, 96%), hsl(0, 0%, 90%));
box-shadow: -2px 4px hsl(0, 0%, 75%),
0px -1px hsl(0, 0%, 75%),
inset 0 1px 2px hsl(0, 0%, 95%),
inset 0 -1px 2px hsl(0, 0%, 95%)
;
}
HTML
<div class="switch1">
<div class="circ1">
<a class="dot1"></a>
</div>
</div>

并非所有按钮都会转换使用必要的perfix指定的属性,因此不要忘记添加它们,例如,第十个按钮。

祝你创造性的成功。

Рекомендую: Готовые HTML шаблоны на русском

此条目发表在免费网站脚本分类目录。将固定链接加入收藏夹。
А так же:

发表评论

电子邮件地址不会被公开。 必填项已用*标注