pbootcms网站模板|日韩1区2区|织梦模板||网站源码|日韩1区2区|jquery建站特效-html5模板网

基于純CSS3的6種手繪涂鴉按鈕效果

這是一組非常有趣的純CSS3手繪風格卡通按鈕設計效果。這組手繪風格按鈕共6種不同的效果,它們以手繪涂鴉的方式,以不同的按鈕邊框線條寬度和虛線來構成按鈕,效果非常不錯。 .

  簡要教程

  這是一組非常有趣的純CSS3手繪風格卡通按鈕設計效果。這組手繪風格按鈕共6種不同的效果,它們以手繪涂鴉的方式,以不同的按鈕邊框線條寬度和虛線來構成按鈕,效果非常不錯。


查看演示    下載插件

  使用方法

  HTML結構

  該手繪風格卡通按鈕的HTML結構就是使用一個按鈕<button>元素,配以不同的class類來實現不同的手繪風格按鈕。

<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進行布局。頁面字體使用的是一種手繪風格的谷歌字體。

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

  所有的按鈕的背景色都設置為透明,通過padding來設置按鈕的尺寸,并為按鈕設置一些陰影效果和圓角效果。還為按鈕指定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;
}                  

  上面的圓角設置等價于下面的代碼:

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種不同的手繪風格按鈕的指定各自的邊框樣式。

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

  在鼠標滑過按鈕時,修改按鈕的陰影效果。

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

【網站聲明】本站除付費源碼經過測試外,其他素材未做測試,不保證完整性,網站上部分源碼僅限學習交流,請勿用于商業用途。如損害你的權益請聯系客服QQ:2655101040 給予處理,謝謝支持。

相關文檔推薦

由于實際運行環境是在瀏覽器中,因此性能還取決于JavaScript解釋器的效率,指定的FPS幀速在低性能解釋器中可能不會達到,所以這部分不是開發者能夠決定的,開發者能作的是盡可能通
本文將使用HTML5提供的VideoAPI做一個自定義的視頻播放器,需要用到HTML5提供的video標簽、以及HTML5提供的對JavascriptAPI的擴展。,HTML5中國,中國最大的HTML5中文門戶。
隨著 Hybrid 應用的豐富,HTML5 工程師們已經不滿足于把桌面端體驗簡單移植到移動端,他們覬覦移動原生應用人性化的操作體驗,特別是原生應用與生俱來的豐富的手勢系統。HTML5 沒有提
你想要在自己網站上分享一個產品,或者是一個作品集,又或者僅僅只是一個靈感。在你發布到網上之前,你想讓它看起來有吸引力,專業,或者至少得看起來像那么回事。那么你接下
H5廣告,包括H5廣告的設計流程,究竟有什么講究,和階段。為了能幫助更多的人了解H5廣告,我專門做了一個講義。同時,也讓我意外的收到了非常好反饋和認!這是對我的極大鼓勵!我的
本文主要內容有:框架與組件、構建生態、開發技巧與調試、html、css與重構、native/hybrid/桌面開發、前端/H5優化、全棧/全端開發、研究實驗、數據分析與監控、其它軟技能、前端技術網
主站蜘蛛池模板: 3d可视化建模_三维展示_产品3d互动数字营销_三维动画制作_3D虚拟商城 【商迪3D】三维展示服务商 广东健伦体育发展有限公司-体育工程配套及销售运动器材的体育用品服务商 | 识禅_对禅的了解,从这里开始 | 菲希尔X射线测厚仪-菲希尔库伦法测厚仪-无锡骏展仪器有限责任公司 | 顶呱呱交易平台-行业领先的公司资产交易服务平台 | 法兰螺母 - 不锈钢螺母制造厂家 - 万千紧固件--螺母街 | 透平油真空滤油机-变压器油板框滤油机-滤油车-华之源过滤设备 | 武汉EPS线条_EPS装饰线条_EPS构件_湖北博欧EPS线条厂家 | 安徽合肥格力空调专卖店_格力中央空调_格力空调总经销公司代理-皖格制冷设备 | IPO咨询公司-IPO上市服务-细分市场研究-龙马咨询 | 品牌广告服务平台,好排名,好流量,好生意。 | 老房子翻新装修,旧房墙面翻新,房屋防水补漏,厨房卫生间改造,室内装潢装修公司 - 一修房屋快修官网 | 油冷式_微型_TDY电动滚筒_外装_外置式电动滚筒厂家-淄博秉泓机械有限公司 | 无线遥控更衣吊篮_IC卡更衣吊篮_电动更衣吊篮配件_煤矿更衣吊篮-力得电子 | 质构仪_鱼糜弹性仪-上海腾拔仪器科技有限公司 | BOE画框屏-触摸一体机-触控查询一体机-触摸屏一体机价格-厂家直销-触发电子 | 地磅-电子地磅维修-电子吊秤-汽车衡-无人值守系统-公路治超-鹰牌衡器 | 河南不锈钢水箱_地埋水箱_镀锌板水箱_消防水箱厂家-河南联固供水设备有限公司 | 充气膜专家-气膜馆-PTFE膜结构-ETFE膜结构-商业街膜结构-奥克金鼎 | 空气能采暖,热泵烘干机,空气源热水机组|设备|厂家,东莞高温热泵_正旭新能源 | 新型锤式破碎机_新型圆锥式_新型颚式破碎机_反击式打沙机_锤式制砂机_青州建源机械 | 网站优化公司_北京网站优化_抖音短视频代运营_抖音关键词seo优化排名-通则达网络 | 高压分散机(高压细胞破碎仪)百科-北京天恩瀚拓 | 碳化硅,氮化硅,冰晶石,绢云母,氟化铝,白刚玉,棕刚玉,石墨,铝粉,铁粉,金属硅粉,金属铝粉,氧化铝粉,硅微粉,蓝晶石,红柱石,莫来石,粉煤灰,三聚磷酸钠,六偏磷酸钠,硫酸镁-皓泉新材料 | 全自动烧卖机厂家_饺子机_烧麦机价格_小笼汤包机_宁波江北阜欣食品机械有限公司 | 冷却塔减速机器_冷却塔皮带箱维修厂家_凉水塔风机电机更换-广东康明冷却塔厂家 | 钢衬玻璃厂家,钢衬玻璃管道 -山东东兴扬防腐设备有限公司 | 不锈钢酒柜|恒温酒柜|酒柜定制|酒窖定制-上海啸瑞实业有限公司 | 花纹铝板,合金铝卷板,阴极铝板-济南恒诚铝业有限公司 | 齿轮减速机_齿轮减速电机-VEMT蜗轮蜗杆减速机马达生产厂家瓦玛特传动瑞环机电 | 精密五金冲压件_深圳五金冲压厂_钣金加工厂_五金模具加工-诚瑞丰科技股份有限公司 | 协议书_协议合同格式模板范本大全 | 鹤壁创新仪器公司-全自动量热仪,定硫仪,煤炭测硫仪,灰熔点测定仪,快速自动测氢仪,工业分析仪,煤质化验仪器 | 台湾HIWIN上银直线模组|导轨滑块|TBI滚珠丝杆丝杠-深圳汉工 | 校服厂家,英伦校服定做工厂,园服生产定制厂商-东莞市艾咪天使校服 | 驾驶人在线_专业学车门户网站| 小区健身器材_户外健身器材_室外健身器材_公园健身路径-沧州浩然体育器材有限公司 | 【电子厂招聘_普工招工网_工厂招聘信息平台】-工立方打工网 | 智能型高压核相仪-自动开口闪点测试仪-QJ41A电雷管测试仪|上海妙定 | 珠宝展柜-玻璃精品展柜-首饰珠宝展示柜定制-鸿钛展柜厂家 | 欧洲MV日韩MV国产_人妻无码一区二区三区免费_少妇被 到高潮喷出白浆av_精品少妇自慰到喷水AV网站 | 伸缩器_伸缩接头_传力接头-巩义市润达管道设备制造有限公司 |