Menu
Coddy logo textTech

クラス 'social-button'

Coddyの「3Dカード | フロントエンドプロジェクト」コースのレッスン 23/31。

challenge icon

チャレンジ

簡単

ターゲットクラス 'social-button':

  1. 幅を 30 ピクセルに設定します。 
  2. アスペクト比(aspect-ratio)を 1 に設定します。
  3. パディング(padding)を 5px に設定します。 
  4. 背景(background)を white に設定します。
  5. 境界線の半径(border-radius)を 50% に設定します。
  6. 境界線(border)を none に設定します。
  7. 表示(display)を grid に設定します。 
  8. place-content を center に設定します。 
  9. 以下の box-shadow プロパティを追加します:

    box-shadow: rgba(5, 71, 17, 0.5) 0px 7px 5px -5px; 

自分で試してみよう

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="styles.css">
</head>
    <body>
        <!-- Write HTML code here -->
        <script src="script.js"></script>
    </body>
</html>

3Dカード | フロントエンドプロジェクトのすべてのレッスン