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優化、全棧/全端開發、研究實驗、數據分析與監控、其它軟技能、前端技術網
主站蜘蛛池模板: 拖鞋定制厂家-品牌拖鞋代加工厂-振扬实业中国高端拖鞋大型制造商 | 整合营销推广|营销网络推广公司|石家庄网站优化推广公司|智营销 好物生环保网、环保论坛 - 环保人的学习交流平台 | 流量检测仪-气密性检测装置-密封性试验仪-东莞市奥图自动化科技有限公司 | 斗式提升机,斗式提升机厂家-淄博宏建机械有限公司 | AR开发公司_AR增强现实_AR工业_AR巡检|上海集英科技 | 达利园物流科技集团-| 液压中心架,数控中心架,自定心中心架-烟台恒阳机电设计有限公司 行星搅拌机,双行星搅拌机,动力混合机,无锡米克斯行星搅拌机生产厂家 | 桂林腻子粉_内墙外墙抗裂砂浆腻子粉推荐广西鑫达涂料厂家供应 | 定制/定做衬衫厂家/公司-衬衫订做/订制价格/费用-北京圣达信 | 合肥汽车充电桩_安徽充电桩_电动交流充电桩厂家_安徽科帝新能源科技有限公司 | 客服外包专业服务商_客服外包中心_网萌科技 | 油罐车_加油机_加油卷盘_加油机卷盘_罐车人孔盖_各类球阀_海底阀等车用配件厂家-湖北华特专用设备有限公司 | 石磨面粉机|石磨面粉机械|石磨面粉机组|石磨面粉成套设备-河南成立粮油机械有限公司 | 温州富欧金属封头-不锈钢封头厂家| 碳刷_刷握_集电环_恒压簧_电刷厂家-上海丹臻机电科技有限公司 | 吲哚菁绿衍生物-酶底物法大肠菌群检测试剂-北京和信同通科技发展有限公司 | 废气处理_废气处理设备_工业废气处理_江苏龙泰环保设备制造有限公司 | 首页|专注深圳注册公司,代理记账报税,注册商标代理,工商变更,企业400电话等企业一站式服务-慧用心 | 复盛空压机配件-空气压缩机-复盛空压机(华北)总代理 | 农产品溯源系统_农产品质量安全追溯系统_溯源系统 | 百度爱采购运营研究社社群-店铺托管-爱采购代运营-良言多米网络公司 | 六维力传感器_三维力传感器_二维力传感器-南京神源生智能科技有限公司 | 游动电流仪-流通式浊度分析仪-杰普仪器(上海)有限公司 | 纯水电导率测定仪-万用气体检测仪-低钠测定仪-米沃奇科技(北京)有限公司www.milwaukeeinst.cn 锂辉石检测仪器,水泥成分快速分析仪-湘潭宇科分析仪器有限公司 手术室净化装修-手术室净化工程公司-华锐手术室净化厂家 | 全自动端子机|刺破式端子压接机|全自动双头沾锡机|全自动插胶壳端子机-东莞市傅氏兄弟机械设备有限公司 | 新疆十佳旅行社_新疆旅游报价_新疆自驾跟团游-新疆中西部国际旅行社 | 附着力促进剂-尼龙处理剂-PP处理剂-金属附着力处理剂-东莞市炅盛塑胶科技有限公司 | 粘度计维修,在线粘度计,二手博勒飞粘度计维修|收购-天津市祥睿科技有限公司 | 上海律师咨询_上海法律在线咨询免费_找对口律师上策法网-策法网 广东高华家具-公寓床|学生宿舍双层铁床厂家【质保十年】 | 真空干燥烘箱_鼓风干燥箱 _高低温恒温恒湿试验箱_光照二氧化碳恒温培养箱-上海航佩仪器 | 高速混合机_锂电混合机_VC高效混合机-无锡鑫海干燥粉体设备有限公司 | 药品/药物稳定性试验考察箱-埃里森仪器设备(上海)有限公司 | 牛皮纸|牛卡纸|进口牛皮纸|食品级牛皮纸|牛皮纸厂家-伽立实业 | IHDW_TOSOKU_NEMICON_EHDW系列电子手轮,HC1系列电子手轮-上海莆林电子设备有限公司 | 溶氧传感器-pH传感器|哈美顿(hamilton) | 厚壁钢管-厚壁无缝钢管-小口径厚壁钢管-大口径厚壁钢管 - 聊城宽达钢管有限公司 | 济南办公室装修-厂房装修-商铺装修-工装公司-山东鲁工装饰设计 | 真空搅拌机-行星搅拌机-双行星动力混合机-广州市番禺区源创化工设备厂 | 安徽合肥项目申报咨询公司_安徽合肥高新企业项目申报_安徽省科技项目申报代理 | 柔性测斜仪_滑动测斜仪-广州杰芯科技有限公司 | 坏男孩影院-提供最新电影_动漫_综艺_电视剧_迅雷免费电影最新观看 |