- お世話になります。
デモの「全ての売却案件を見る」光るボタンは最初からありましたでしょうか?
履歴を探しても見当たらず、教えて頂きたいです。
何度もすみません。よろしくお願い申し上げます。 - 回答です
キラッと光るボタン
「全ての売却案件を見る」のボタンは、初期にテンプレートを購入された方は無くて
最近、テンプレートを購入された方は付いています。
最近、テンプレートを購入された方は付いています。
実際のキラッと光るボタン
キラッと光るボタンのhtml【コピペOK】
【全ての売却案件を見るのボタン】
WP管理画面 > 外観 > ウィジェット > 固定ページ本文中 > 「テキスト」を新着情報の下に追加して以下を貼り付けてください。
<div class="s-btn1"><a href="/user-blogs">全ての売却案件を見る</a></div>
キラッと光るボタンのcss【コピペOK】
WP管理画面 > 外観 > カスタマイズ > 追加CSS の中に以下を貼り付けてください。
/* トップページ光るボタン */ .s-btn1 a { display: block; width: 50%; background: #2ca9e1; box-shadow: 0 3px 0 0 #0095d9; text-align: center; padding: 10px; background: #2ca9e1; color: #ffffff; text-decoration: none; margin-right: auto; margin-left: auto; border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; font-weight: bold; box-sizing: border-box; position: relative; overflow: hidden; } .s-btn1 a::before { content: ''; height: 100%; width: 30px; position: absolute; top: -180px; left: 0; background-color: #fff; opacity: 0; animation: s-btn1 3s ease-in-out infinite; display: inline-block; } s-btn1 a:hover { text-decoration: none; color: #fff; box-shadow: none; -webkit-transform: translateY(3px); } @-webkit-keyframes s-btn1 { 0% { -webkit-transform: scale(0) rotate(45deg); opacity: 0; } 80% { -webkit-transform: scale(0) rotate(45deg); opacity: 0.5; } 81% { -webkit-transform: scale(4) rotate(45deg); opacity: 1; } 100% { -webkit-transform: scale(50) rotate(45deg); opacity: 0; } }
キラッと光るボタンのhtmlとcssを指定の場所に貼り付けると「全ての売却案件を見る」光るボタンが表示されます。