如何使按鈕擴大圈

-3

我想使第一個圈可以擴大一樣大的背景與按鈕的第二個圈，誰知道怎麼做？如何使按鈕擴大圈

2015-12-16 Meigi

，這和谷歌搜索中使用的backgroundColor或圓角半徑，嘗試一些代碼，你的自我。 –

我很害怕。什麼語言/平臺？沒有標籤，標題中沒有任何內容。你在這裏沒有給任何東西 – Madivad

@Madivad在問題中有標籤，不需要把它們放在標題中。儘管這樣做很少，但*是真實的。 – justinw

好一個辦法做到這一點是使用Java腳本添加和刪除保存你的圈子屬性的類。您可以創建一個CSS類，該類包含一組屬性，然後在單擊按鈕時由javascript調用該屬性。

.circle_b { 
 
    height: 200px; 
 
    width: 200px; 
 
    border-radius: 50%; 
 
    background: #ddd; 
 
    position: relative; 
 
} 
 

 
.circle_s { 
 
    height: 80px; 
 
    width: 80px; 
 
    border-radius: 50%; 
 
    background: #ddd; 
 
    position: absolute; 
 
    top: 0; 
 
    bottom: 0; 
 
    left: 0; 
 
    right: 0; 
 
    margin: auto; 
 
    border: 0; 
 
    background: coral; 
 
    cursor: pointer; 
 
    transition: all 0.2s ease; 
 
} 
 

 
.sizePlus{ 
 
    height: 200px; 
 
    width: 200px; 
 
    transition: all 0.2s ease; 
 
} 
 

 

 
button{ 
 
    display: block; 
 
    position: absolute; 
 
    width: 200px; 
 
    height: 100px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<body> 
 
    <script type="text/javascript"> 
 
    $(document).click(function (e) { 
 
     $el = $(e.target); 
 
    if ($el.hasClass('clickme')) { 
 
      $(".circle_s").toggleClass('sizePlus'); 
 

 
     } else { 
 
      $(".circle_s").removeClass('sizePlus'); 
 
     } 
 
    }); 
 
    </script> 
 
    <div class="circle_b"> 
 
    <button class="circle_s clickme"> 
 
    CLICK ME 
 
    </button> 
 
    </div> 
 
</body>

來源

2015-12-16 06:54:25 Guille

它是一個必須使用腳本源？謝謝之前:) – Meigi

好吧，我說「一種方法做到這一點......」，這意味着這不是唯一的選擇。你也許可以使用CSS來完成它，但這不僅僅是一些簡單的js代碼行。對於某些動畫和用戶定義的交互，JS似乎做得很好。最後，這個決定就在你身上。 – Guille

DEMO

動畫按鈕的懸停

HTML

<div class="circle_b"> 
    <button class="circle_s"> 
     HOVER ME! 
    </button> 
</div>

CSS

.circle_b { 
    height: 200px; 
    width: 200px; 
    border-radius: 50%; 
    background: #ddd; 
    position: relative; 
} 

.circle_s { 
    height: 80px; 
    width: 80px; 
    border-radius: 50%; 
    background: #ddd; 
    position: absolute; 
    top: 0; 
    bottom: 0; 
    left: 0; 
    right: 0; 
    margin: auto; 
    border: 0; 
    background: coral; 
    cursor: pointer; 
    transition: all 0.2s ease; 
} 

.circle_s:hover { 
    height: 200px; 
    width: 200px; 
    transition: all 0.2s ease; 
}

來源

2015-12-16 05:48:08 4dgaurav

如何使按鈕擴大圈

回答

相關問題