CSS按鈕如何實現(xiàn)？

1、css按鈕如何實現(xiàn)？本文中全部這些按鈕的結(jié)構(gòu)只需要一個錨點標(biāo)志就可以了，由于我們將用法:before偽類創(chuàng)建其他元素。 例一： 首先，我們將給出按鈕的普通樣式，包括其活動狀態(tài)。重要的是要注重相對定位，由于它將協(xié)助我們稍后定位:before元素： css .a_demo_one background-color:ba2323; padding:10px; position:relative; font-family:&39;opensans&39;,sans-serif; font-size:12px; text-decoration:none; color:fff; borde

2、r:solid1px831212; background-image:linear-gradient(bottom,rgb(171,27,27)0%,rgb(212,51,51)100%); border-radius:5px; .a_demo_one:active padding-bottom:9px; padding-left:10px; padding-right:10px; padding-top:11px; top:1px; background-image:linear-gradient(bottom,rgb(171,27,27)100%,rgb(212,51,51)0%); 然后

3、，我們用法:before偽元素創(chuàng)建灰色容器。用法肯定的定位來定位我們的元素： css .a_demo_one:before background-color:ccd0d5; content:"" display:block; position:absolute; width:100%; height:100%; padding:8px; left:-8px; top:-8px; z-index:-1; border-radius:5px; box-shadow:inset0px1px1px909193,0px1px0pxfff; 例二： css .a_dem

4、o_two background-color:6fba26; padding:10px; position:relative; font-family:&39;opensans&39;,sans-serif; font-size:12px; text-decoration:none; color:fff; background-image:linear-gradient(bottom,rgb(100,170,30)0%,rgb(129,212,51)100%); box-shadow:inset0px1px0pxb2f17f,0px6px0px3d6f0d; border-ra

5、dius:5px; .a_demo_two:active top:7px; background-image:linear-gradient(bottom,rgb(100,170,30)100%,rgb(129,212,51)0%); box-shadow:inset0px1px0pxb2f17f,inset0px-1px0px3d6f0d; color:156785; text-shadow:0px1px1pxrgba(255,255,255,0.3); background:rgb(44,160,202); 因為偽元素的位置取決于其父元素，因此一旦父元素向下移動幾個像素，就必需向上移動具有

6、相同像素數(shù)量的偽元素。 css .a_demo_two:before background-color:072239; content:"" display:block; position:absolute; width:100%; height:100%; padding-left:2px; padding-right:2px; padding-bottom:4px; left:-2px; top:5px; z-index:-1; border-radius:6px; box-shadow:0px1px0pxfff; .a_demo_two:active:

7、before top:-2px; 例三： 我們要做的第一件事就是制造容易的部分。在這里，你會注重到一個右邊距，這是為了補償偽元素的寬度，假如你想讓按鈕居中。 .a_demo_three background-color:3bb3e0; font-family:&39;opensans&39;,sans-serif; font-size:12px; text-decoration:none; color:fff; position:relative; padding:10px20px; border-left:solid1px2ab7ec; margin-left:35px; b

8、ackground-image:linear-gradient(bottom,rgb(44,160,202)0%,rgb(62,184,229)100%); border-top-right-radius:5px; border-bottom-right-radius:5px; box-shadow:inset0px1px0px2ab7ec,0px5px0px0px156785,0px10px5px999; .a_demo_three:active top:3px; background-image:linear-gradient(bottom,rgb(62,184,229)0%,rgb(44

9、,160,202)100%); box-shadow:inset0px1px0px2ab7ec,0px2px0px0px156785,0px5px3px999; 然后是偽元素： .a_demo_three:before content:"·" width:35px; max-height:29px; height:100%; position:absolute; display:block; padding-top:8px; top:0px; left:-36px; font-size:16px; font-weight:bold; c

10、olor:8fd1ea; text-shadow:1px1px0px07526e; border-right:solid1px07526e; background-image:linear-gradient(bottom,rgb(10,94,125)0%,rgb(14,139,184)100%); border-top-left-radius:5px; border-bottom-left-radius:5px; box-shadow:inset0px1px0px2ab7ec,0px5px0px0px032b3a,0px10px5px999; .a_demo_three:active:before top:-3px; box-shadow:inset0px1px0px2ab7ec,0px5px0px0px03