如何通过CSS创建不同效果的按钮
通过CSS可以实现多种按钮效果，比如通过CSS渐变属性可以设置颜色渐变的效果按钮，通过 box-shadow实现按下效果按钮等
今天在本篇文章中将分享如何制作几种不同样式的按钮效果，它们分别是平面，边框，渐变和阴影以及按下样式按钮。接下来在文章中将和大家详细介绍如何通过CSS代码来实现效果。
HTML代码
<div class="pm">
<button>平面按钮</button>
</div>基础的CSS样式代码
button{
display: inline-block;
margin: 0 10px 0 0;
padding: 15px 45px;
font-size:20px;
font-family:"Bitter",serif;
line-height: 20px;
appearance: none;
box-shadow:none;
border-radius: 0;
}（1）平面样式CSS按钮
平面样式按钮的使用现在非常流行，并且符合无处不在的平面设计趋势。，这些的平面样式按钮效果很好看。以下代码是按钮处于正常的情况下的状态
.pm button {
color:#fff;
background-color:#6496c8;
border:none;
}效果图：
（2）边框样式CSS按钮
边框样式按钮与平面按钮属于同一类。唯一的区别是，我们将使用边框来代替平面按钮所使用的背景颜色。以下代码是按钮处于正常的情况下的状态
.pm button {
color:#444;
border:5px solid #6496c8;
background-color: #fff;
}效果图：
（3）渐变和阴影样式CSS按钮
这种渐变和阴影样式的按钮更加符合我们在过去的日子里所看到的按钮效果。如果你喜欢那些颜色多彩的那么渐变/阴影样式的按钮适合您。创建这款按钮的好处是它的效果全部由CSS完成，因此可以轻松的对其放大或缩小而不必担心会丢失分辨率，或者必须创建新图像。以下代码是按钮处于正常的情况下的状态
.pm button {
color:#fff;
text-align: center;
box-shadow:inset 0 0 0 1px #e91e637d;
background: -webkit-linear-gradient(left, red , blue); /* Safari 5.1 - 6.0 */
background: -o-linear-gradient(right, rgb(244,103,34), rgb(197,29,124));
background: -moz-linear-gradient(right, rgb(244,103,34), rgb(197,29,124));
background: linear-gradient(to right, rgb(244,103,34) , rgb(197,29,124));}
}效果图：
（4）按样式CSS按钮
这些“按下”式按钮结合了一些平面设计和假象，让用户感觉他们实际上按下了按钮。当用户按下它时，它似乎陷入了页面。它的实现需要用到阴影来设置，使其具有3D弹出外观。以下代码是按钮处于正常的情况下的状态
.pm button {
color: #fff;
background-color: #6496c8;
border: none;
border-radius: 15px;
box-shadow: 0 10px #27496d;
}效果图：
总结：
绛旓細鑰屼笖width涓巋eight瑕佸崟鐙啓鍑烘潵 娉ㄦ剰锛1锛屾瘡鐢讳竴涓浘褰㈤兘瑕佹彁璧风瑪銆備笉鐒朵細杩炲湪涓璧 2锛宎rc鐨(centerX[鍦嗗績妯潗鏍囷紝浠ョ埗鑺傜偣鐨勫彸涓婅涓哄潗鏍囧師鐐癸紝鍚戝乏鍚戜笅寤虹珛鍧愭爣杞碷,centerY,r[鍗婂緞], startAngle[璧峰鐐圭殑瑙掑害銆傝捣濮嬩互锛1锛0锛夎〃绀0锛岋紙0锛1锛夎〃绀3/2*PI璁＄畻銆傚綋璁剧疆涓洪嗘椂閽堢殑鏃跺...
绛旓細4銆佹渶鍚庡鏋滄槸鏂板缓鐨刢ss鏂囦欢锛屼繚瀛樿矾寰勮姝ｇ‘銆傚摢涓猦tml灞炴у彲鐢ㄦ潵瀹氫箟鍐呰仈鏍峰紡锛熷唴閮ㄦ牱寮忚窡鍐呰仈鏍峰紡閮芥槸鐢眘tyle鏍囩鏉ュ畾涔夌殑锛屽彧涓嶈繃鏄斁鐨勪綅缃涓嶄竴鏍鑰屽凡锛佹湁涓夌鏍峰紡锛屼竴绉嶆槸鏀惧湪澶栭潰鐨刢ss鏂囦欢锛岀О浣滃閮ㄦ牱寮忥紝涓嶈繃html鏂囦欢瑕閫氳繃link鏍囩鏉ュ紩鐢紝涓绉嶆槸鏀惧湪head鏍囩閲岄潰锛岀О浣滃唴閮ㄦ牱寮忥紝鏈鍚庝竴绉嶆槸鏀惧湪...
绛旓細
绛旓細html涓竟妗嗘庝箞璁剧疆浣嶇疆锛1銆乭tml涓皟鏁翠綅缃娇鐢css鐨float灞炴с傝缁嗙敤娉曢鍏堝湪html鏂囦欢涓鏂板缓涓や釜p瀹瑰櫒锛岀敤鏉ユ柟渚挎紨绀鏁堟灉锛屽鍣ㄤ腑閮藉姞鍏2鏍囩锛岃缃涓嶅悓鏂囧瓧渚夸簬鍖哄垎锛2銆乸鏍囩缁欏畠鍦╯tyle鏍囩璁剧疆class灞炴х殑鏍峰紡锛岀粰瀹冮珮搴﹀拰瀹藉害浠ュ強棰滆壊锛宧2鏍囩涓涓娇鐢╢loat灞炴э紝鍙︿竴涓笉浣跨敤銆傝繖閲宖loat鏍囩鐨勪綔鐢...
绛旓細濡備綍璁╁畠浠笉鍦ㄥ悓涓鏃跺埢杩愬姩鍛?娉ㄦ剰鍒CSS鍔ㄧ敾鏈夊欢杩( delay )杩欎竴灞炴с備妇涓牀瀛,姣斿鏈夊崄涓厓绱犳挱鏀惧崄涓姩鐢,灏嗙浜屼釜鍏冪礌鐨勫姩鐢绘挱鏀炬椂闂磋瀹氫负姣旂涓涓厓绱犳櫄0.5绉(涔熷氨鏄皢寤惰繜璁句负0.5绉),鍏朵粬鍏冪礌浠ユ绫绘帹,杩欐牱瀹冧滑灏变細閿欏紑鏉,褰㈡垚涓绉嶇嫭鐗圭殑瑙嗚鏁堟灉銆 杩欏氨鏄墍璋撶殑浜ら敊鍔ㄧ敾:閫氳繃璁剧疆涓嶅悓鐨寤惰繜鏃堕棿,杈惧埌...
绛旓細褰撶劧瀹為檯涓婃垜浠繕闇瑕佹洿澶氱殑浠ｇ爜鏉ョ粰鎻愮ず澧炲姞鏍峰紡锛屼絾鏄笉鐢鎷呭績锛屽凡缁忔湁浜嗕负姝よ璁＄殑寮哄ぇ涓旂函绮圭殑鍙 Hint.css 鐨CSS搴撳拰 Balloon.css 銆2.浣跨敤鑷畾涔夋暟鎹睘鎬у拰 attr() 鍑芥暟鎴戜滑宸茬粡瀛︿細濡備綍浣跨敤 attr() 鏉鍒涘缓鎻愮ず锛屽彟澶栬繕鏈変竴浜涘満鏅兘浣跨敤鍒拌繖涓嚱鏁般閫氳繃涓庢暟鎹睘鎬х浉缁撳悎锛屼綘鍙互閫氳繃寰堢畝鍗曠殑涓琛...
绛旓細灏哾iv鏀逛负input灏辫浜嗭紝涓嬮潰鏄┖鏍奸敭鐨勬牱瀛愶紝鍏跺畠鐓ф敼锛
绛旓細褰撴寜閽殑 type="submit"锛堟彁浜わ級鍜 type="reset"锛堥噸缃級鏃讹紝鍙互鍔犺儗鏅佷慨楗拌竟妗嗭紝鍋氫换浣曟兂瑕佺殑鏍峰紡锛屼絾濡傛灉鏁堟灉鏄病鏈夎竟妗嗭紝涔熷氨鏄border:none鏃讹紝鍏跺畠娴忚鍣ㄤ腑鏄剧ず姝ｅ父锛屼絾鍦↖E6涓篃鏄笉璧蜂綔鐢ㄧ殑锛岃繕鏄細瀛樺湪榛戣壊杈规銆傝В鍐虫闂寰堢畝鍗曪紝鎴戜滑鍙渶瑕佹妸type璁剧疆鎴恇utton锛岃繖鏍峰氨鏄彲浠ュ仛鍒板吋瀹...
绛旓細8銆佺劧鍚庡湪椤堕儴tab鏍囩涓夋嫨鍒氭墠鍒涘缓鐨凜SS鏍峰紡琛紝骞跺湪鏍峰紡琛ㄤ腑鍐欎竴涓牱寮忥紝鍛藉悕涓篴aa锛屽苟鎸変笅蹇嵎閿瓹trl+S淇濆瓨鏍峰紡琛細9銆佹渶鍚庡洖鍒癶tml缂栬緫椤甸潰锛屽湪p鏍囩涓紩鍏lass锛岃緭鍏ュ垰鎵嶅啓鐨勬牱寮忕殑鍚嶇Оaaa骞朵繚瀛樼綉椤碉細10銆佹渶鍚庣偣鍑婚《閮ㄧ殑璁捐鎸夐挳锛屽氨鍙互鐪嬪埌瀹炴椂鏁堟灉浜嗭紝姝ゆ椂css鏂囦欢灏辨垚鍔熼摼鎺ヨ繘鍘讳簡锛歞w2020鎬庝箞...
绛旓細鍏蜂綋姝ラ濡備笅锛氫竴銆佺珛鏂逛綋缁撴瀯涓紝浣跨敤涓涓獁rapper div鏉ュ寘瑁圭珛鏂逛綋銆傚湪閲岄潰浣跨敤6涓猟iv鏉ュ埗浣滅珛鏂逛綋鐨6涓潰銆備簩銆佺珛鏂逛綋鐨勬瘡涓涓潰閮芥湁瀹冭嚜宸辩殑鍏冪礌銆傛垜浠◢鍚庝細浣跨敤CSS鏉ュ皢绔嬫柟浣撶殑6涓潰鏀剧疆鍒版纭殑浣嶇疆涓娿備笁銆佸湪绔嬫柟浣撶殑CSS鏍峰紡涓紝棣栧厛瑕佸叧娉ㄧ殑鏄珛鏂逛綋鐨剋rapper div銆備负浜嗗埗浣3D鏁堟灉锛屾垜浠渶瑕佷负瀹...
