안녕하세요처럼 만든 유사한 디자인 싶습니다 이 CSS와.
여기 에 설명 된 유사 요소로 만들려고했습니다 . 매번 문제가 발생합니다. 하나의 그라데이션 상자 그림자 만 사용할 수 있거나 모든 지점에 개별적으로 빛나는 윤곽선 / 테두리를 설정할 수 없습니다. 나는 또한 eliptic gradient를 사용하여 빛나는 윤곽선을 차단하려고 시도했습니다.
누군가 이것에 대한 독특한 접근이 있는지 말해 줄 수 있습니까?
내 코드가 있습니다
.wrap{
height: 20em;
width: 15em;
background: black;
}
.btn-t {
position: relative;
background: radial-gradient(ellipse at center, blue, blue);
box-shadow: inset 0 0 0 5px #7B9DFF;
color: $white-txt;
height: 4em;
line-height: 3.75em;
margin: 1em;
max-width: 10em;
padding: 0.25em 1em;
text-align: center;
font-size: 20px;
color: white;
}
.btn-t:after {
content: '';
position: absolute;
width: 95%;
height: 20%;
top: 40%;
right: 0;
border-right: 5px solid red;
border-left: 5px solid red;
}
.btn-t:hover {
text-shadow: 0px 0px 10px white;
background: radial-gradient(ellipse at center, #71B1F5, blue);
}
감사합니다.
나는 가까운 것을 재현했습니다 (텍스트 버튼 용 버전, 아이콘 버전 용 버전) :
아이콘 버전은 FontAwesome이 아이콘을 생성하는 데 사용된다고 가정합니다 (따라서 .fa참조) :
/* text button */
.btn-glow {
border: 1px solid #354a40;
background-color: #1e2120;
padding: .5em .85em;
transition: all 0.025s linear;
color: #6c8678;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.75);
font-size: .75em;
font-weight: bold;
}
.btn-glow:hover {
color: #e6fcf5;
text-shadow: 1px 1px 1em #66977b;
border-image: linear-gradient(90deg, #375345, #9afdcf, #375345) 10;
background-image: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.1) 100%);
}
.btn-glow:focus {
color: #79c6a1;
border-image: linear-gradient(90deg, #375345, #9afdcf, #375345) 10;
background-image: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.1) 100%);
outline: none;
}
.btn-glow:active {
color: #fff;
text-shadow: 1px 1px 2em #9ee6bf;
background-color: #406552;
border-image: linear-gradient(90deg, #375345, #9afdcf, #375345) 10;
background-image: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.25) 0%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.25) 100%);
}
/* icon version */
.btn-glow-large {
border: 1px solid #354a40;
background-color: #1e2120;
padding: 1em;
transition: all 0.025s linear;
}
.btn-glow-large .fa {
color: #6c8678;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.75);
transition: all 0.025s linear;
}
.btn-glow-large:hover {
border-image: linear-gradient(#375345, #9afdcf, #375345) 10;
background-image: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.1) 100%);
}
.btn-glow-large:hover .fa {
color: #e6fcf5;
text-shadow: 1px 1px 1em #66977b;
}
.btn-glow-large:focus {
border-image: linear-gradient(#375345, #9afdcf, #375345) 10;
background-image: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.1) 100%);
outline: none;
}
.btn-glow-large:focus .fa {
color: #79c6a1;
}
.btn-glow-large:active {
background-color: #406552;
border-image: linear-gradient(#375345, #9afdcf, #375345) 10;
background-image: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.25) 0%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.25) 100%);
}
.btn-glow-large:active .fa {
color: #fff;
text-shadow: 1px 1px 2em #9ee6bf;
}
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다