• コミュニティ

  ボタンの中の文字の色を変えたい

  トピックス by widget初心者 1792 pt  2023年10月5日 10:05 167 PV

  【相談内容】

  ボタンの中に文字があるのですが、一部の文字の色を変更したいです！

  ボタン.png 86 KB 画像ファイル — クリックして 見る

  • コピーダウンロードリンク

  

  widgetマスター   7 月, 1 週間前 2 人 · 1 コメント

  • widget
  • ボタン
• 1 コメント

• 

  widgetマスター

  モデレータ

  2023年10月5日 10:08

  お待たせいたしました！！！

  【HTMLの調整】

  会社名を下記のようにタグで囲みます

  <span class=”company-name”>ヤマワケエステート</span>

  【CSSの調整】

  [ 調整前 ]

  .original-button {
      display: flex;
      align-items: center;
      justify-content: center;
      line-height: 1.55;
      text-decoration: none;
      color: #ffffff;
      font-size: 18px;
      border-radius: 20px;
      width: 320px;
      height: 115px;
      font-weight: bold;
      border-bottom: 5px solid #000000;
      transition: 0.3s;
      background-color: #191970;
  }

  ↓

  [ 調整後 ]

  .original-button {
      line-height: 1.55;
      text-decoration: none;
      color: #ffffff;
      font-size: 18px;
      border-radius: 20px;
      width: 320px;
      height: auto;
      font-weight: bold;
      border-bottom: 5px solid #000000;
      transition: 0.3s;
      background-color: #191970;
      padding: 15px 0;
  }
  .company-name {
      color: #ff2643; /* 参考サイトと同じカラー お好みで調整して下さい */
  }

  設置例

  https://sb-draft-preview.squadbeyond.com/articles/Lx-SCLCkqUqqpmFpg/draft?token=82ebce841c9391a981dc6149dae39d17

Log In to Reply