这篇博客展示了如何使用CSS3创建四种不同类型的按钮，并为这些按钮添加独特的悬停动效。通过调整CSS样式，按钮在悬停时会有旋转、放大、平移等效果，适合用于网页交互设计。
CSS
语言：
CSSSCSS
确定
/*
* demo styles
*/
@media screen and (min-width: 769px) {
html {
font-size: 62.5%;
}
}
@media screen and (min-width: 641px) and (max-width: 768px) {
html {
font-size: 56%;
}
}
@media screen and (max-width: 640px) {
html {
font-size: 50%;
}
}
body {
font-family: "PT Sans", -apple-system, BlinkMacSystemFont, "Roboto", "Open Sans", "Helvetica Neue", "Segoe UI", "Arial", sans-serif;
font-size: 1.6rem;
margin: 0;
-webkit-overflow-scrolling: touch;
background-color: #f0f0f0;
}
a {
color: inherit
}
.page {
height: 100vh;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-ms-flex-pack: distribute;
justify-content: space-around;
}
@media screen and (min-width: 1200px) {
.page {
height: 100vh;
}
}
@media screen and (max-width: 1199px) {
.page {
min-height: 100vh;
}
}
.demo {
-webkit-box-flex: 2;
-ms-flex-positive: 2;
flex-grow: 2;
最低0.47元/天 解锁文章
1263
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
