簡(jiǎn)要教程

　　這是一組非常有趣的純CSS3手繪風(fēng)格卡通按鈕設(shè)計(jì)效果。這組手繪風(fēng)格按鈕共6種不同的效果，它們以手繪涂鴉的方式，以不同的按鈕邊框線條寬度和虛線來構(gòu)成按鈕，效果非常不錯(cuò)。

使用方法

　HTML結(jié)構(gòu)

該手繪風(fēng)格卡通按鈕的HTML結(jié)構(gòu)就是使用一個(gè)按鈕元素,配以不同的class類來實(shí)現(xiàn)不同的手繪風(fēng)格按鈕。

<section>
  <button class=&#39;lined thick&#39;>Lined Thick</button>
  <button class=&#39;dotted thick&#39;>Dotted Thick</button>
  <button class=&#39;dashed thick&#39;>Dashed Thick</button>
</section>

CSS樣式

在這個(gè)DEMO中，整個(gè)頁面以flexbox進(jìn)行布局。頁面字體使用的是一種手繪風(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效果的過渡動(dòng)畫。

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è)置等價(jià)于下面的代碼：

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)滑過按鈕時(shí)，修改按鈕的陰影效果。

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;
  }
}

以上就是基于純CSS3的6種手繪涂鴉按鈕效果的內(nèi)容，更多相關(guān)內(nèi)容請(qǐng)關(guān)注PHP中文網(wǎng)（m.miracleart.cn）！

相關(guān)文章：

如何使用html5與css3完成google涂鴉動(dòng)畫

基于javascript html5 canvas實(shí)現(xiàn)可調(diào)畫筆顏色/粗細(xì)/橡皮的涂鴉板

Html5簡(jiǎn)單實(shí)現(xiàn)涂鴉板的示例代碼