#html #css
#HTML #CSS
Вопрос:
Я создал небольшую кнопку с несколькими границами, и при наведении на нее я вижу плавный переход цвета. Я не могу избавиться от границ, когда нависаю над ними. В настоящее время при наведении курсора цвет и цвет фона меняются, но границы не исчезают.
Вот мой код.
.c-btn--lg { font-size: 2rem; line-height: 1; border: none; font-family: titling-gothic-fb-compressed, sans-serif; font-weight: 400; letter-spacing: .2rem; min-width: 14.5rem; padding: 1.6rem 2rem; } .c-btn--primary { background-color: transparent; border: none; color: #382f2d; position: relative; text-align: center; text-decoration: none; text-transform: uppercase; -webkit-transition: .3s ease; -o-transition: .3s ease; transition: .3s ease; } .c-btn--primary:before { bottom: 0.5rem; left: 0; right: 0.5rem; top: 0; } .c-btn--primary:after { bottom: 0; left: 0.5rem; right: 0; top: 0.5rem; } .c-btn--primary:after, .c-btn--primary:beforee { border: 0.1rem solid #382f2d; content: ""; pointer-events: none; position: absolute; -webkit-transition: .3s ease; -o-transition: .3s ease; transition: .3s ease; } .c-btn--primary:after, .c-btn--primary:before { border: 0.1rem solid #382f2d; content: ""; pointer-events: none; position: absolute; -webkit-transition: .3s ease; -o-transition: .3s ease; transition: .3s ease; } .c-btn--primary:focus, .c-btn--primary:hover { -webkit-box-shadow: 0 0 0 0 #d1ccbd, inset 1rem 7rem 0 0 #d1ccbd; box-shadow: 0 0 0 0 #d1ccbd, inset 1rem 7rem 0 0 #d1ccbd; color:white; } lt;div class="submitwrapper"gt; lt;button class="c-age-gate__submit c-btn c-btn--primary c-btn--lg" type="submit"gt;ENTERlt;/buttongt; lt;/divgt; Как я могу это исправить?
Ответ №1:
Вы можете сделать это «плавно» с rgba помощью цвета.
.c-btn--lg { font-size: 2rem; line-height: 1; border: none; font-family: titling-gothic-fb-compressed, sans-serif; font-weight: 400; letter-spacing: .2rem; min-width: 14.5rem; padding: 1.6rem 2rem; } .c-btn--primary { background-color: transparent; border: none; color: #382f2d; position: relative; text-align: center; text-decoration: none; text-transform: uppercase; -webkit-transition: .3s ease; -o-transition: .3s ease; transition: .3s ease; } .c-btn--primary:before { bottom: 0.5rem; left: 0; right: 0.5rem; top: 0; } .c-btn--primary:after { bottom: 0; left: 0.5rem; right: 0; top: 0.5rem; } .c-btn--primary:after, .c-btn--primary:before { border: 0.1rem solid rgba(56, 47, 45, 1); content: ""; pointer-events: none; position: absolute; -webkit-transition: .3s ease; -o-transition: .3s ease; transition: .3s ease; } .c-btn--primary:focus, .c-btn--primary:hover { -webkit-box-shadow: 0 0 0 0 #d1ccbd, inset 1rem 7rem 0 0 #d1ccbd; box-shadow: 0 0 0 0 #d1ccbd, inset 1rem 7rem 0 0 #d1ccbd; color:white; } .c-btn--primary:hover::after, .c-btn--primary:hover::before { border-color: rgba(56, 47, 45, 0); } lt;div class="submitwrapper"gt; lt;button class="c-age-gate__submit c-btn c-btn--primary c-btn--lg" type="submit"gt;ENTERlt;/buttongt; lt;/divgt; Ответ №2:
Вы не можете заставить границы «плавно» исчезнуть, но вы можете избавиться от них с помощью этих селекторов:
.c-btn--primary:hover::after, .c-btn--primary:hover::before { border: none; } .c-btn--lg { font-size: 2rem; line-height: 1; border: none; font-family: titling-gothic-fb-compressed, sans-serif; font-weight: 400; letter-spacing: .2rem; min-width: 14.5rem; padding: 1.6rem 2rem; } .c-btn--primary { background-color: transparent; border: none; color: #382f2d; position: relative; text-align: center; text-decoration: none; text-transform: uppercase; -webkit-transition: .3s ease; -o-transition: .3s ease; transition: .3s ease; } .c-btn--primary:before { bottom: 0.5rem; left: 0; right: 0.5rem; top: 0; } .c-btn--primary:after { bottom: 0; left: 0.5rem; right: 0; top: 0.5rem; } .c-btn--primary:after, .c-btn--primary:before { border: 0.1rem solid #382f2d; content: ""; pointer-events: none; position: absolute; -webkit-transition: .3s ease; -o-transition: .3s ease; transition: .3s ease; } .c-btn--primary:focus, .c-btn--primary:hover { -webkit-box-shadow: 0 0 0 0 #d1ccbd, inset 1rem 7rem 0 0 #d1ccbd; box-shadow: 0 0 0 0 #d1ccbd, inset 1rem 7rem 0 0 #d1ccbd; color:white; } .c-btn--primary:hover::after, .c-btn--primary:hover::before { border: none; } lt;div class="submitwrapper"gt; lt;button class="c-age-gate__submit c-btn c-btn--primary c-btn--lg" type="submit"gt;ENTERlt;/buttongt; lt;/divgt; Ответ №3:
Вы можете просто добавить это в свой код:
.c-btn--primary:hover::after, .c-btn--primary:hover::before { border: none; }