卡卡網(wǎng)

在本教程中，我將向大家介紹如何只使用一個(gè)錨標(biāo)簽和一個(gè)強(qiáng)大的CSS，就能創(chuàng)建一個(gè)漂亮的按鈕。

偽元素CSS按鈕

demo

標(biāo)記

所有這些按鈕的結(jié)構(gòu)只需要一個(gè)錨標(biāo)簽就可以工作，因?yàn)槲覀儗⑹褂?code>::before偽類創(chuàng)建其他元素。

實(shí)例一

偽元素CSS按鈕：實(shí)例一

我認(rèn)為這是最簡單的一個(gè)，它有一個(gè)非常規(guī)則的css。

CSS

首先，我們將給出按鈕的一般樣式，包括其活動(dòng)狀態(tài)。注意相對(duì)位置很重要，因?yàn)樗鼘椭覀兩院蠖ㄎ?code>::before元素：

.a_demo_one {
  background-color:#ba2323;
  padding:10px;
  position:relative;
  font-family: 'Open Sans', sans-serif;
  font-size:12px;
  text-decoration:none;
  color:#fff;
  border: solid 1px #831212;
  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%);
}

然后，我們使用::before偽元素創(chuàng)建灰色容器。使用絕對(duì)定位來定位我們的元素：

.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: inset 0px 1px 1px #909193, 0px 1px 0px #fff;
}

execcodegetcode

實(shí)例二

偽元素CSS按鈕：實(shí)例二

這一個(gè)有點(diǎn)復(fù)雜，因?yàn)槭侨S的外觀。此按鈕不在其“容器”中，但當(dāng)您單擊它時(shí)，它將向下移動(dòng)：

.a_demo_two {
  background-color:#6fba26;
  padding:10px;
  position:relative;
  font-family: 'Open Sans', 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: inset 0px 1px 0px #b2f17f, 0px 6px 0px #3d6f0d;
  border-radius: 5px;
}

.a_demo_two:active {
  top:7px;
  background-image: linear-gradient(bottom, rgb(100,170,30) 100%, rgb(129,212,51) 0%);
  box-shadow: inset 0px 1px 0px #b2f17f, inset 0px -1px 0px #3d6f0d;
  color: #156785;
  text-shadow: 0px 1px 1px rgba(255,255,255,0.3);
  background: rgb(44,160,202);
}

這里有一個(gè)棘手的部分：

由于偽元素的位置取決于其父元素，因此一旦父元素向下移動(dòng)幾個(gè)像素，就必須向上移動(dòng)相同數(shù)量的像素。

.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: 0px 1px 0px #fff;
}

.a_demo_two:active::before {
  top:-2px;
}

execcodegetcode

實(shí)例三

偽元素CSS按鈕：實(shí)例三

這是一個(gè)分割的按鈕，一旦你點(diǎn)擊它，它就凹進(jìn)去。

CSS

在這里，您會(huì)注意到一個(gè)右邊距，這是為了補(bǔ)償偽元素的寬度。

.a_demo_three {
  background-color:#3bb3e0;
  font-family: 'Open Sans', sans-serif;
  font-size:12px;
  text-decoration:none;
  color:#fff;
  position:relative;
  padding:10px 20px;
  border-left:solid 1px #2ab7ec;
  margin-left:35px;
  background-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: inset 0px 1px 0px #2ab7ec, 0px 5px 0px 0px #156785, 0px 10px 5px #999;
}

.a_demo_three:active {
  top:3px;
  background-image: linear-gradient(bottom, rgb(62,184,229) 0%, rgb(44,160,202) 100%);
  box-shadow: inset 0px 1px 0px #2ab7ec, 0px 2px 0px 0px #156785, 0px 5px 3px #999;
}

偽元素CSS這樣寫：

.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;
  color:#8fd1ea;
  text-shadow:1px 1px 0px #07526e;
  border-right:solid 1px #07526e;
  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:inset 0px 1px 0px #2ab7ec, 0px 5px 0px 0px #032b3a, 0px 10px 5px #999 ;
}

.a_demo_three:active::before {
  top:-3px;
  box-shadow:inset 0px 1px 0px #2ab7ec, 0px 5px 0px 0px #032b3a, 1px 1px 0px 0px #044a64, 2px 2px 0px 0px #044a64, 2px 5px 0px 0px #044a64, 6px 4px 2px #0b698b, 0px 10px 5px #999 ;
}

execcodegetcode

實(shí)例四

偽元素CSS按鈕：實(shí)例四

這次，我們將使用偽元素作為指針，使用一個(gè)圖像作為背景。

CSS

.a_demo_four {
  background-color:#4b3f39;
  font-family: 'Open Sans', sans-serif;
  font-size:12px;
  text-decoration:none;
  color:#fff;
  position:relative;
  padding:10px 20px;
  padding-right:50px;
  background-image: linear-gradient(bottom, rgb(62,51,46) 0%, rgb(101,86,78) 100%);
  border-radius: 5px;
  box-shadow: inset 0px 1px 0px #9e8d84, 0px 5px 0px 0px #322620, 0px 10px 5px #999;
}

.a_demo_four:active {
  top:3px;
  background-image: linear-gradient(bottom, rgb(62,51,46) 100%, rgb(101,86,78) 0%);
  box-shadow: inset 0px 1px 0px #9e8d84, 0px 2px 0px 0px #322620, 0px 5px 3px #999;
}

.a_demo_four::before {
  background-color:#322620;
  background-image:url(../images/right_arrow.png); /* 圖像背景 */
  background-repeat:no-repeat;
  background-position:center center;
  content:"";
  width:20px;
  height:20px;
  position:absolute;
  right:15px;
  top:50%;
  margin-top:-9px;
  border-radius: 50%;
  box-shadow: inset 0px 1px 0px #19120f, 0px 1px 0px #827066;
}

.a_demo_four:active::before {
  top:50%;
  margin-top:-12px;
  box-shadow: inset 0px 1px 0px #827066, 0px 3px 0px #19120f, 0px 6px 3px #382e29;
}

execcodegetcode

實(shí)例五

偽元素CSS按鈕：實(shí)例五

這個(gè)例子有點(diǎn)俗氣，但是你可以用很多有用的方式來使用它。

CSS

.a_demo_five {
  background-color:#9827d3;
  width:150px;
  display:inline-block;
  font-family: 'Open Sans', sans-serif;
  font-size:12px;
  text-decoration:none;
  color:#fff;
  position:relative;
  margin-top:40px;
  padding-bottom:10px;
  padding-top:10px;
  background-image: linear-gradient(bottom, rgb(168,48,232) 100%, rgb(141,32,196) 0%);
  border-bottom-right-radius: 5px;
  border-bottom-left-radius: 5px;
  box-shadow: inset 0px 1px 0px #ca73f8, 0px 5px 0px 0px #6a1099, 0px 10px 5px #999;
}

.a_demo_five:active {
  top:3px;
  background-image: linear-gradient(bottom, rgb(168,48,232) 0%, rgb(141,32,196) 100%);
  box-shadow: inset 0px 4px 1px #7215a3, 0px 2px 0px 0px #6a1099, 0px 5px 3px #999;
}

.a_demo_five::before {
  background-color:#fff;
  background-image:url(../images/heart.gif);
  background-repeat:no-repeat;
  background-position:center center;
  border-left:solid 1px #CCC;
  border-top:solid 1px #CCC;
  border-right:solid 1px #CCC;
  content:"";
  width:148px;
  height:40px;
  position:absolute;
  top:-30px;
  left:0px;
  margin-top:-11px;
  z-index:-1;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
}

.a_demo_five:active::before {
  top: -33px;
  box-shadow: 0px 3px 0px #ccc;
}

execcodegetcode

最后

感謝您閱讀本教程，我希望您覺得它有用。

標(biāo)簽: css  css3  button  按鈕  偽元素