css四个按钮并列,4个常用的CSS3按钮悬停动效

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;