CSS浮雕效果
效果图:
HTML源码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form>
<div class="segment">
<h1>Sign Up</h1>
</div>
<label>
<input type="text" placeholder="Username" />
</label>
<label>
<input type="password" placeholder="Password" />
</label>
<button class="red" type="button" title="Login"> Log in <svg t="1730280552580" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5041" width="16" height="16" style="vertical-align: middle;"><path d="M409.002667 469.333333L300.8 361.130667 361.130667 300.8l211.2 211.2-211.2 211.2-60.330667-60.330667L409.002667 554.666667H128v-85.333334h281.002667zM469.333333 128h341.333334c46.933333 0 85.333333 38.4 85.333333 85.333333v597.333334c0 46.933333-38.4 85.333333-85.333333 85.333333h-341.333334v-85.333333h341.333334V213.333333h-341.333334V128z" fill="#ae1100" p-id="5042"></path></svg></button>
<div class="input-group">
<label>
<input type="text" placeholder="Register By Email" />
</label>
<button class="unit" type="button" title="Register"><svg t="1730281008926" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6135" width="16" height="16"><path d="M722.6 645.295c17.497-26.999 9.793-63.072-17.206-80.567-21.997-14.255-45.104-26.406-69.045-36.377 69.66-51.387 114.937-134.006 114.937-227.013 0-155.467-126.483-281.951-281.951-281.951s-281.951 126.483-281.951 281.951c0 92.95 45.223 175.527 114.811 226.919-51.763 21.557-99.309 53.261-140.153 94.103-82.080 82.080-127.284 191.213-127.284 307.292 0 32.174 26.082 58.254 58.254 58.254s58.254-26.080 58.254-58.254c0-175.385 142.685-318.068 318.068-318.068 61.579 0 121.298 17.606 172.699 50.915 27.002 17.498 63.074 9.793 80.567-17.206zM469.334 135.897c91.225 0 165.442 74.218 165.442 165.442s-74.218 165.442-165.442 165.442c-91.225 0-165.442-74.217-165.442-165.442s74.218-165.442 165.442-165.442z" p-id="6136" fill="#ae1100"></path><path d="M926.63 743.197h-66.992v-66.992c0-32.174-26.080-58.254-58.254-58.254s-58.254 26.080-58.254 58.254v66.992h-66.992c-32.174 0-58.254 26.080-58.254 58.254s26.080 58.254 58.254 58.254h66.992v66.992c0 32.174 26.080 58.254 58.254 58.254s58.254-26.080 58.254-58.254v-66.992h66.992c32.174 0 58.254-26.080 58.254-58.254s-26.080-58.254-58.254-58.254z" p-id="6137" fill="#ae1100"></path></svg></button>
</div>
</form>
<style>
body,
html {
background-color: #ebecf0;
}
body,
p,
input,
select,
textarea,
button {
font-family: "Montserrat", sans-serif;
letter-spacing: -0.2px;
font-size: 16px; /* $ruler: 16px */
}
div,
p {
color: #babecc; /* $color-shadow */
text-shadow: 1px 1px 1px #fff; /* $color-white */
}
form {
width: 320px; /* $ruler * 20 */
margin: 0 auto;
}
.segment {
padding: 32px 0; /* $ruler * 2 */
text-align: center;
}
button,
input {
border: 0;
outline: 0;
font-size: 16px; /* $ruler */
border-radius: 320px; /* $ruler * 20 */
padding: 16px; /* $ruler */
background-color: #ebecf0; /* $color-bg */
text-shadow: 1px 1px 0 #fff; /* $color-white */
}
label {
display: block;
margin-bottom: 24px; /* $ruler * 1.5 */
width: 100%;
}
input {
margin-right: 8px; /* $ruler / 2 */
box-shadow: inset 2px 2px 5px #babecc, inset -5px -5px 10px #fff; /* $color-shadow, $color-white */
width: 100%;
box-sizing: border-box;
transition: all 0.2s ease-in-out;
appearance: none;
-webkit-appearance: none;
}
input:focus {
box-shadow: inset 1px 1px 2px #babecc,
inset -1px -1px 2px #fff; /* $color-shadow, $color-white */
}
button {
color: #61677c;
font-weight: bold;
box-shadow: -5px -5px 20px #fff, 5px 5px 20px #babecc; /* $color-white, $color-shadow */
transition: all 0.2s ease-in-out;
cursor: pointer;
font-weight: 600;
}
button:hover {
box-shadow: -2px -2px 5px #fff, 2px 2px 5px #babecc; /* $color-white, $color-shadow */
}
button:active {
box-shadow: inset 1px 1px 2px #babecc,
inset -1px -1px 2px #fff; /* $color-shadow, $color-white */
}
.button .icon {
margin-right: 8px; /* $ruler / 2 */
}
button.unit {
border-radius: 8px; /* $ruler / 2 */
line-height: 0;
width: 48px; /* $ruler * 3 */
height: 48px; /* $ruler * 3 */
display: inline-flex;
justify-content: center;
align-items: center;
margin: 0 8px; /* $ruler / 2 */
font-size: 19.2px; /* $ruler * 1.2 */
}
button.unit .icon {
margin-right: 0;
}
button.red {
display: block;
width: 100%;
color: #ae1100; /* $color-red */
margin: 32px 0;
}
.input-group {
display: flex;
align-items: center;
justify-content: flex-start;
}
.input-group label {
margin: 0;
flex: 1;
}
</style>
</body>
</html>
相关参考:cssinspirationguide - csc inspiration guide onlinecsc inspiration guide onlinehttps://csscoco.com/inspiration/#/./shadow/relief-style-btn