メニュー
  • ホーム
  • ブログ
    • ご挨拶
    • サイト作成
    • リスクヘッジ
  • プロフィール
かずえのいちからWEBデザイナー
  • ホーム
  • ブログ
    • ご挨拶
    • サイト作成
    • リスクヘッジ
  • プロフィール
かずえのいちからWEBデザイナー
  • ホーム
  • ブログ
    • ご挨拶
    • サイト作成
    • リスクヘッジ
  • プロフィール

swellボタンを変更してボタンにCSSを入れてみた!!!

2022 12/18
  1. ホーム
  2. サイト作成
  3. swellボタンを変更してボタンにCSSを入れてみた!!!

サイト作成 27日目✨✨

今日は、昨日と同様、ランサーズの仕事の営業と
お仕事依頼のお客様に、質問をしながら状況の確認と擦り合わせをしたよ👍

あとは、佐々木税理士事務所のコーポレートサイトをグローバルメニューを綺麗にしたんだけど、

swellボタンを使って調整をしていたんだけど、サイズ感の調整に結構限度があって、
swellボタンじゃなくてCSSで入れることにしたよ👍

ボタンの色味、だったりサイズ感だったりを合わせるために入れたCSSがこれ ↓

HTML

<div class=”button002″>
<a href=”#”>ボタンのデザイン</a>
</div>

CSS

/* 001 */
.button001 a {
background: #1e73be;
   border-radius: 0px 0px / 0px 0px;
   position: absolute;
display: flex;
justify-content: space-evenly;
align-items: center;
   margin: 10 auto;
max-width: 500px;
padding: 20px 15px;
color: #ffff;
transition: 0.3s ease-in-out;
font-weight: 500;
}
.button001 a:hover {
background: #999;
color: #FFF;
}
.button001 a:after {
content: ”;
width: 3px;
height: 3px;
border-top: 1px solid #1e73be;
border-right: 1px solid #1e73be;
transform: rotate(45deg) translateY(-50%);
position: absolute;
top: 50%;
right: 20px;
border-radius: 2px;
transition: 0.3s ease-in-out;
}
.button001 a:hover:after {
border-color: #FFF;
}

今日も全然時間取れなくて余りで来てないので明日頑張ろうと思うよ✨

2022/12/18

サイト作成 まとめ
  • ランサーズでの返信対応だったり、ブログランキングの登録だったり!
  • グローバルメニューのCSSについて!!!
新着記事
  • ランサーズの案件をあまり進められなかった😵😵
  • メインページの見出しの統一と固定ページは終わらせた!!
  • ランサーズの案件を行ったよ!!
タグ
WEBデザイナーWordPressご挨拶
カテゴリー
  • ご挨拶 (1)
  • サイト作成 (36)
  • まとめ (39)
  • リスクヘッジ (2)
2023年10月
月火水木金土日
 1
2345678
9101112131415
16171819202122
23242526272829
3031 
« 12月  
シンプル美と機能性を両立させた、国内最高峰のWordPressテーマ『SWELL』
新着記事
  • ランサーズの案件をあまり進められなかった😵😵
    2022年12月30日
  • メインページの見出しの統一と固定ページは終わらせた!!
    2022年12月29日
  • ランサーズの案件を行ったよ!!
    2022年12月28日
  • 見出しのバナーの変更とサイトの他ページの作成!!!
    2022年12月27日
タグ
WEBデザイナー WordPress ご挨拶
カテゴリー
  • ご挨拶
  • サイト作成
  • まとめ
  • リスクヘッジ
2023年10月
月 火 水 木 金 土 日
 1
2345678
9101112131415
16171819202122
23242526272829
3031  
« 12月    
  • ホーム
  • ブログ

© いちからWEB.

  • メニュー
  • ホーム
  • ブログ
  • 検索
  • トップへ