【CSS】 マテリアルデザインの丸ボタンを自作する

CSS/SCSS/SASS

  ■ はじめに

https://blogs.yahoo.co.jp/dk521123/37632575.html
でも扱ったが、無料版の Material Design for Bootstrap 4　では
丸ボタンすらない。

以下のサイトを参考に自作してみる
http://materialdesignblog.com/creating-a-simple-material-design-action-button-with-css/

 

  ■ サンプル

Bootstrap4 をインポートしているが特に不要だと思う。 Font Awesome（以下の関連記事参照）を使ってGmailっぽいボタンを作成
https://blogs.yahoo.co.jp/dk521123/35506135.html
<!DOCTYPE html>
<html lang="jp">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>Demo</title>
    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous">
    <!-- Bootstrap core CSS -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    
<style>
.fab {
   width: 50px;
   height: 50px;
   background-color: red;
   border-radius: 50%;
   box-shadow: 0 6px 10px 0 #666;
   transition: all 0.1s ease-in-out;
 
   font-size: 20px;
   color: white;
   text-align: center;
   line-height: 50px;
 
   position: fixed;
   right: 30px;
   bottom: 100px;
   z-index: 5000;
}
 
.fab:hover {
   box-shadow: 0 6px 14px 0 #666;
   transform: scale(1.05);
}
</style>
</head>

<body class="grey lighten-3">

    <!--Main Navigation-->
    <header>
    </header>
    <!--Main Navigation-->

    <!--Main layout-->
    <main class="pt-5 mx-lg-5">
         <div class="fab"><i class="fas fa-pen"></i></div>
    </main>
    <!--Main layout-->

</body>
</html>

 

  参考文献

http://materialdesignblog.com/creating-a-simple-material-design-action-button-with-css/

  今後役に立つかもしないサイト

http://materialdesignblog.com/multifunctional-material-design-button-in-pure-css/
http://materialdesignblog.com/awesome-css-codepen-to-enhance-material-design-fab-button/
http://materialdesignblog.com/material-design-floating-action-button-for-web-that-really-stands-out/

 

  関連記事

  Material Design for Bootstrap 4 ～ 入門編 ～

https://blogs.yahoo.co.jp/dk521123/37632575.html

  マテリアル デザイン フレームワーク を調査してみた

https://blogs.yahoo.co.jp/dk521123/37559037.html

  アイコン を 表示する ～ Font Awesome ～

https://blogs.yahoo.co.jp/dk521123/35506135.html