ปุ่มอย่างนี้เขาทำอย่างไรเอ่ย เทพชี้แนะที เพราะสวยแบบผู้ดีอ่ะ

[newbie-pro]

ปุ่มสีน้ำเงิน "รับรูปลักษณ์ใหม่"

[KenjiroAPI]

คลิกขวา Inspect Element ครับ 

[King_Peachy]

ใช่ครับ สวยแบบผู้ดี วิธีตามที่อีกโพสบอกเลย

[KECO]

โค้ด เลือก ขยาย

<button>รับรูปลักษณ์ใหม่</button>

แบบนี้รึเปล่าครับ

[newbie-pro]

<button>รับรูปลักษณ์ใหม่</button>


แบบนี้รึเปล่าครับ

ครับ แต่แกะโค๊ดไม่เป็น หาตาลายแล้ว


คลิกขวาก็แล้วครับ รู้แต่ว่ามันเป็นคลาส class="yt-uix-button-content แค่นั้นครับ แต่โค๊ดมันอยู่ตรงไหนไม่รู้เลยจริงๆ

[aituanoe]

CSS ปะคับ

[newbie-pro]

คิดว่าหน้าตาจะเป็นแบบนี้ครับ (ยกตัวอย่างนะครับ)

<div class="botton"><a href="https://google.com">รับรูปลักษณ์ใหม่</a></div>


อันนี้ CSS
.botton{
width:auto;
height:auto;
background: #f7fbff;
border:#93C9FF solid 1px;
margin:0 10px 0 0;
padding:10px;

[Phi999]

JAVA

<div id="footer-logo"><a href="/" title="หน้าแรกของ YouTube"><img src="//s.ytimg.com/yts/img/pixel-vfl3z5WfW.gif" alt="หน้าแรกของ YouTube"></a></div>  <ul class="pickers yt-uix-button-group" data-button-toggle-group="optional">
      <li>
         
  <button id="yt-picker-language-button" class=" yt-uix-button yt-uix-button-default" onclick=";return false;" type="button" data-button-menu-id="arrow-display" data-picker-key="language" data-picker-position="footer" data-button-action="yt.www.picker.load" data-button-toggle="true" role="button"><span class="yt-uix-button-icon-wrapper"><img class="yt-uix-button-icon yt-uix-button-icon-footer-language" src="//s.ytimg.com/yts/img/pixel-vfl3z5WfW.gif" alt="" title=""><span class="yt-uix-button-valign"></span></span><span class="yt-uix-button-content">  <span class="yt-picker-button-label">
ภาษา:
  </span>
  ไทย
</span><img class="yt-uix-button-arrow" src="//s.ytimg.com/yts/img/pixel-vfl3z5WfW.gif" alt="" title=""></button>


      </li>
      <li>
         
  <button id="yt-picker-country-button" class=" yt-uix-button yt-uix-button-default" onclick=";return false;" type="button" data-button-menu-id="arrow-display" data-picker-key="country" data-picker-position="footer" data-button-action="yt.www.picker.load" data-button-toggle="true" role="button"><span class="yt-uix-button-content">  <span class="yt-picker-button-label">
ประเทศ:
  </span>
  ทั่วโลก
</span><img class="yt-uix-button-arrow" src="//s.ytimg.com/yts/img/pixel-vfl3z5WfW.gif" alt="" title=""></button>


      </li>
      <li>
         
  <button id="yt-picker-safetymode-button" class=" yt-uix-button yt-uix-button-default" onclick=";return false;" type="button" data-button-menu-id="arrow-display" data-picker-key="safetymode" data-picker-position="footer" data-button-action="yt.www.picker.load" data-button-toggle="true" role="button"><span class="yt-uix-button-content">  <span class="yt-picker-button-label">
ความปลอดภัย:
  </span>
ปิด
</span><img class="yt-uix-button-arrow" src="//s.ytimg.com/yts/img/pixel-vfl3z5WfW.gif" alt="" title=""></button>


      </li>
  </ul>
<a href="//support.google.com/youtube/?hl=th-TH&amp;p=" class="yt-uix-button   yt-uix-sessionlink yt-uix-button-default" data-sessionlink="ei=XweGUYWvGoubkwW12YCoCg"><span class="yt-uix-button-content">  <img class="questionmark" src="//s.ytimg.com/yts/img/pixel-vfl3z5WfW.gif">
  <span>ความช่วยเหลือ</span>
</span></a>      <div id="yt-picker-language-footer" class="yt-picker" style="display: none">
      <p class="yt-spinner">
      <img src="//s.ytimg.com/yts/img/pixel-vfl3z5WfW.gif" class="yt-spinner-img" alt="กำลังโหลดไอคอน">

    <span class="yt-spinner-message">
กำลังโหลด...
    </span>
  </p>

  </div>

      <div id="yt-picker-country-footer" class="yt-picker" style="display: none">
      <p class="yt-spinner">
      <img src="//s.ytimg.com/yts/img/pixel-vfl3z5WfW.gif" class="yt-spinner-img" alt="กำลังโหลดไอคอน">

    <span class="yt-spinner-message">
กำลังโหลด...
    </span>
  </p>

  </div>

      <div id="yt-picker-safetymode-footer" class="yt-picker" style="display: none">
      <p class="yt-spinner">
      <img src="//s.ytimg.com/yts/img/pixel-vfl3z5WfW.gif" class="yt-spinner-img" alt="กำลังโหลดไอคอน">

    <span class="yt-spinner-message">
กำลังโหลด...
    </span>
  </p>

  </div>

[altonut]

คิดว่าหน้าตาจะเป็นแบบนี้ครับ (ยกตัวอย่างนะครับ)

<div class="botton"><a href="https://google.com">รับรูปลักษณ์ใหม่</a></div>


อันนี้ CSS
.botton{
width:auto;
height:auto;
background: #f7fbff;
border:#93C9FF solid 1px;
margin:0 10px 0 0;
padding:10px;

ประมาณนี้ก็น่าจะได้แล้วล่ะครับ