利用:before和:after偽類製作CSS3 圓形按鈕 含demo

Cheng發表於2014-04-04
CSSS3

要求

    • 必備知識

      基本瞭解CSS語法,初步瞭解CSS3語法知識。

    • 開發環境

      Adobe Dreamweaver CS6

    • 演示地址

      演示地址


預覽截圖(抬抬你的滑鼠就可以看到演示地址哦):

2014-04-04_030707

製作步驟:

一, <head>標籤結構

下面程式碼中使用了CSS3無字首指令碼prefixfree.js,可以省去CSS3中字首“-moz”、“-webkit”、“-o”、“-ms”，如對該指令碼不瞭解的可以點選下面連結哦:CSS3無字首指令碼prefixfree.js與Animatable使用介紹

<head>
<meta charset="utf-8">
<title>button</title>
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/prefixfree.min.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="css/button.css" />
<script type="text/javascript">
/*這裡採用淡入效果試試*/
$(function(){
    $(".bt").css("opacity","1");});
</script>
</head>

二, <body>標籤結構

 

<body>
      <div class="bt">
          <div class="button"></div>
          <div class="button2"></div>
          <div style="clear:both"> </div> 
      </div>
</body>

三，CSS程式碼

* {
    padding: 0;
    margin: 0;
}
/* 清除浮動 */
.clearfix:after {
    content: "";
    display: table;
    clear: both;
}
html, body {
    height: 100%;
}
body {
    font-family: "Microsoft YaHei";
    background: #E1E1E1;
    font-weight: 300;
    font-size: 15px;
    color: #333;
    overflow: hidden;
}
a {
    text-decoration: none;
}
/*按鈕 陰影無擴充套件 */
.bt {
    margin: 100px auto;
    display: block;
    width: 350px;
    opacity:0;
    border-bottom: 1px solid #C5C5C5;
    border-top: 1px solid #C5C5C5;
    box-shadow: 0 1px 0 #F6F6F6, 0 1px 0 #F6F6F6 inset;
    transition: all 0.5s ease-in;
}

.button:before, .button2:before {
    content: "";
    width: 130px;
    height: 130px;
    display: block;
    z-index: -1;
    position: relative;
    background: #ddd;
    left: -15px;
    top: -15px;
    border-radius: 65px;
    box-shadow: inset 2px 2px 4px rgba(0,0,0,0.4);
}
.button:after, .button2:after {
    content: "註冊";
    color: #09F;
    font-size: 20px;
    width: 100%;
    height: 100%;
    line-height: 100px;
    text-align: center;
    position: absolute;
    top: 0;
    display: block;
}
.button2:after {
    content: "登入";
    word-spacing: 25px;
    color: #A0D989;
}
.button, .button2 {
    float: left;
    margin: 50px auto;
    cursor: pointer;
    height: 100px;
    width: 100px;
    display: block;
    position: relative;
    color: black;
    text-align: center;
    line-height: 100px;
    border-radius: 50px;
    box-shadow: 2px 2px 4px rgba(0,0,0,0.4);
    background: #FFF;
    transition: all 0.5s ease-in;
}
.button {
    float: left;
}
.button2 {
    float: right;
}

OK,製作結束。是不是簡單得讓人抬不起精神呢? 趕緊動手試試吧。再次申明演示地址到文章的開始處已經給出了哦，找找看啊。

下面給大家分享幾個線上製作CSS3按鈕的網站吧:

1，Live Tools是一個線上UI製作工具，他提供了按鈕、表單、icon圖示和Ribbons的製作工具，可以線上配置相關引數，生成你需要的效果程式碼。

2，CSS3 Button Generator是一款簡單的按鈕生成工具，他可以製作出兩種狀態下的按鈕效果，當然你如果需要其他狀態的下按鈕效果，要在其基礎上做一些引數的變化，相對來說麻煩一點。

3，Button Generator生成和圖片效果一樣的按鈕工具。

4，Webarti CSS3 Button Maker是一款非常強大的按鈕線上生成工具，他提供了很多種不同按鈕效果讓你參考，可以說只需選擇就能製作出自己需要的按鈕，思考的時間都不用你花了。

 

如以上文章或連結對你有幫助的話，別忘了在文章結尾處輕輕點選一下 “還不錯”按鈕或到頁面右下角點選 “贊一個” 按鈕哦。你也可以點選頁面右邊“分享”懸浮按鈕哦，讓更多的人閱讀這篇文章。

 

作者:Li-Cheng
本文版權歸作者和部落格園共有，歡迎轉載，但未經作者同意必須保留此段宣告，且在文章頁面明顯位置給出原文連線，否則保留追究法律責任的權利。

相關文章