עזרה לגבי border

[איש פשוט]

שלום.
אני רוצה לעשות אפקט של כפתור שנלחץ עי כך שכאשר העכבר עובר על הכפתור העובי של הborder קטן.. הבעייה היא שכשאני מגדיר את האפקט שנוצר כאשר העכבר עובר על הכפתור (שבעצם אני מקטין את העובי של הborder) הborder קטן וגדל במבחוץ לבפנים ולא מבפנים לבחוץ ואז אין את האשליה של הלחיצה על כפתור..
מישהו יודע איך אני משנה את זה? ניסיתי לתת מינוס לערך וזה לא מועיל.
מקווה שהובנתי..

 

[Naftali Stein]

תוכל להשתמש במקום border ב outline עם אותם פרמטרים.

 

[Tochnitan]

לא יודע אם זה הפתרון אבל אתה יכול להגדיל ה-padding באותו סכום שאתה מקטין את הborder
לדוגמא:

.btn{
     background-color:blue
    padding: 10px;
    border: 5px solid black;
 }
 .btn:hover{
   padding: 12px;
    border: 3px solid black;    
 }

 

[חנה 1]

לא כל כך מומלץ להשתמש בborder כשמשתמשים באפקט של שינוי עובי המסגרת. במקום זה עדיף להשתמש כמו שכתבו כאן בoutline או בbox shadow (שיכול לעזור עם האפקט של לחיצת כפתור. ניתן להגדיר בתחילה box shadow רגיל - חיצוני, ובעת לחיצה להוסיף לו את המילה inset ואז הוא יהיה עם הצללה פנימית, שגורמת לאפקט של כפתור לחוץ).
הסיבה היא שהמסגרת, בניגוד לoutline תופסת מקום בעמוד ויש לה משמעות, לעומת box shadow או outline שאין להם משמעות מבחינת המיקום של אלמנט מול אלמנטים אחרים ואינם תופסים מקום.

 

[איש פשוט]

תודה רבה לכולם!!