SimpleButton/styles.css: Difference between revisions
From Project Rebearth
No edit summary |
No edit summary |
||
| (9 intermediate revisions by the same user not shown) | |||
| Line 1: | Line 1: | ||
.mp-button { | .mp-button { | ||
position: relative; | |||
background: linear-gradient(to right, transparent, #e8daa8 15%, #e8daa8 90%, transparent); | background: linear-gradient(to right, transparent, #e8daa8 15%, #e8daa8 90%, transparent); | ||
color: #562c1b; | |||
padding: 5px 40px; | |||
border-top: 2px solid; | border-top: 2px solid; | ||
border-bottom: 2px solid; | border-bottom: 2px solid; | ||
border-image: linear-gradient(to right, transparent, #562c1b 15%, #562c1b 90%, transparent) 1; | border-image: linear-gradient(to right, transparent, #562c1b 15%, #562c1b 90%, transparent) 1; | ||
line-height: 16px; | |||
vertical-align: middle; | |||
} | } | ||
.mp-button a { | .mp-button a { | ||
color: inherit; | |||
color: | |||
text-decoration: none; | text-decoration: none; | ||
} | |||
.mp-button a::after { | |||
content: ''; | |||
position: absolute; | |||
top: 0; | |||
left: 0; | |||
right: 0; | |||
bottom: 0; | |||
} | } | ||
| Line 17: | Line 28: | ||
background: linear-gradient(to right, transparent, #562c1b 15%, #562c1b 90%, transparent); | background: linear-gradient(to right, transparent, #562c1b 15%, #562c1b 90%, transparent); | ||
border-image: linear-gradient(to right, transparent, #e8daa8 15%, #e8daa8 90%, transparent) 1; | border-image: linear-gradient(to right, transparent, #e8daa8 15%, #e8daa8 90%, transparent) 1; | ||
color: #e8daa8; | |||
} | } | ||
.mp-button:hover a { | .mp-button:hover a { | ||
color: | color: inherit; | ||
} | } | ||
.mp-button-icon { | .mp-button-icon { | ||
vertical-align: | vertical-align: 1px; | ||
margin-right: | margin-right: 10px; | ||
} | |||
.mp-button-row { | |||
display: flex; | |||
flex-wrap: wrap; | |||
justify-content: center; | |||
} | |||
.mp-button-row .mp-button { | |||
margin: 5px; | |||
} | } | ||
Latest revision as of 19:11, 9 February 2026
.mp-button {
position: relative;
background: linear-gradient(to right, transparent, #e8daa8 15%, #e8daa8 90%, transparent);
color: #562c1b;
padding: 5px 40px;
border-top: 2px solid;
border-bottom: 2px solid;
border-image: linear-gradient(to right, transparent, #562c1b 15%, #562c1b 90%, transparent) 1;
line-height: 16px;
vertical-align: middle;
}
.mp-button a {
color: inherit;
text-decoration: none;
}
.mp-button a::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.mp-button:hover {
background: linear-gradient(to right, transparent, #562c1b 15%, #562c1b 90%, transparent);
border-image: linear-gradient(to right, transparent, #e8daa8 15%, #e8daa8 90%, transparent) 1;
color: #e8daa8;
}
.mp-button:hover a {
color: inherit;
}
.mp-button-icon {
vertical-align: 1px;
margin-right: 10px;
}
.mp-button-row {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.mp-button-row .mp-button {
margin: 5px;
}