簡要教程
這是一組非常有趣的純CSS3手繪風(fēng)格卡通按鈕設(shè)計效果。這組手繪風(fēng)格按鈕共6種不同的效果，它們以手繪涂鴉的方式，以不同的按鈕邊框線條寬度和虛線來構(gòu)成按鈕，效果非常不錯。
使用方法
HTML結(jié)構(gòu)
該手繪風(fēng)格卡通按鈕的HTML結(jié)構(gòu)就是使用一個按鈕<button>元素,配以不同的class類來實現(xiàn)不同的手繪風(fēng)格按鈕。
<section> <button class='lined thick'>Lined Thick</button> <button class='dotted thick'>Dotted Thick</button> <button class='dashed thick'>Dashed Thick</button> </section>
CSS樣式
在這個DEMO中，整個頁面以flexbox進行布局。頁面字體使用的是一種手繪風(fēng)格的谷歌字體。
@import url(https://fonts.googleapis.com/css?family=Patrick+Hand+SC);
html, body {
width: 100%;
min-height: 100%;
margin: 0;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
background: #F0F0D8;
font-family: 'Patrick Hand SC', cursive;
}
html section, body section {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
width: 100%;
min-height: 100%;
margin-bottom: 3rem;
}
所有的按鈕的背景色都設(shè)置為透明，通過padding來設(shè)置按鈕的尺寸，并為按鈕設(shè)置一些陰影效果和圓角效果。還為按鈕指定0.5秒的ease效果的過渡動畫。
html section button, body section button {
-webkit-align-self: center;
-ms-flex-item-align: center;
align-self: center;
background: transparent;
padding: 1rem 1rem;
margin: 0 1rem;
-webkit-transition: all .5s ease;
transition: all .5s ease;
color: #41403E;
font-size: 2rem;
letter-spacing: 1px;
outline: none;
box-shadow: 20px 38px 34px -26px rgba(0, 0, 0, 0.2);
border-radius: 255px 15px 225px 15px/15px 225px 15px 255px;
}
上面的圓角設(shè)置等價于下面的代碼：
border-top-left-radius: 255px 15px; border-top-right-radius: 15px 225px; border-bottom-right-radius: 225px 15px; border-bottom-left-radius:15px 255px;
然后分別為6種不同的手繪風(fēng)格按鈕的指定各自的邊框樣式。
html section button.lined.thick, body section button.lined.thick {
border: solid 7px #41403E;
}
html section button.dotted.thick, body section button.dotted.thick {
border: dotted 5px #41403E;
}
html section button.dashed.thick, body section button.dashed.thick {
border: dashed 5px #41403E;
}
html section button.lined.thin, body section button.lined.thin {
border: solid 2px #41403E;
}
html section button.dotted.thin, body section button.dotted.thin {
border: dotted 2px #41403E;
}
html section button.dashed.thin, body section button.dashed.thin {
border: dashed 2px #41403E;
}
在鼠標(biāo)滑過按鈕時，修改按鈕的陰影效果。
html section button:hover, body section button:hover {
box-shadow: 2px 8px 4px -6px rgba(0, 0, 0, 0.3);
}
最后，使用媒體查詢來制作在小屏幕上的布局效果。
@media (max-width: 620px) {
body h1 {
margin-top: 2rem;
}
body section {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
margin-bottom: 1rem;
}
body section button {
-webkit-align-self: center;
-ms-flex-item-align: center;
align-self: center;
margin-bottom: 2rem;
}
}
來源：http://www.htmleaf.com/css3/ui-design/201602263152.html
【網(wǎng)站聲明】本站除付費源碼經(jīng)過測試外，其他素材未做測試，不保證完整性，網(wǎng)站上部分源碼僅限學(xué)習(xí)交流，請勿用于商業(yè)用途。如損害你的權(quán)益請聯(lián)系客服QQ：2655101040 給予處理，謝謝支持。