meta name="naver-site-verification" content="ae4cae44dcaf70f327af01a4817e8b3936153eaf" / 클릭을 부르는 버튼
본문 바로가기

티스토리툴바

._my-button { /* 위 아래 거리 */ margin-top: 30px !important; margin-bottom: 30px !important; /* 글자 크기 */ font-size: 25px !important; /* 글자 굵게 (사용한 폰트에 따라 적용이 될 수도 안될 수도 있음) */ /* 100 ~ 900 (일반적으로 500) */ font-weight: 700 !important; /* 가로 크기 */ /* 글자 크기만큼 줄이려면 fit-content */ width: fit-content !important; /* 버튼 안의 상하 / 좌우 여백 */ padding: 12px 50px !important; /* 글자색 */ color: white !important; /* 배경색 */ background-color: rgb(255, 69, 69) !important; /* background: linear-gradient(to right, rgb(88, 166, 255), rgb(117, 67, 255)); */ /* 테두리 */ border-style: solid !important; /* 모양 */ border-width: 4px !important; /* 두께 */ border-color: rgb(202, 77, 77) !important; /* 색깔 */ /* 글자에 밑줄 넣을지(underline), 말지(none) */ text-decoration: none !important; /* 테두리 둥근 정도 */ border-radius: 100px !important; /* 애니메이션 동작 */ transition-duration: 0.3s !important; /* 버튼 그림자 */ box-shadow: 2px 4px 6px rgba(0, 0, 0, 0.4) !important; /* 텍스트 그림자 */ text-shadow: 2px 4px 6px rgba(0, 0, 0, 0.2) !important; ._my-button { /* 위 아래 거리 */ margin-top: 30px !important; margin-bottom: 30px !important; /* 글자 크기 */ font-size: 25px !important; /* 글자 굵게 (사용한 폰트에 따라 적용이 될 수도 안될 수도 있음) */ /* 100 ~ 900 (일반적으로 500) */ font-weight: 700 !important; /* 가로 크기 */ /* 글자 크기만큼 줄이려면 fit-content */ width: fit-content !important; /* 버튼 안의 상하 / 좌우 여백 */ padding: 12px 50px !important; /* 글자색 */ color: white !important; /* 배경색 */ background-color: rgb(255, 69, 69) !important; /* background: linear-gradient(to right, rgb(88, 166, 255), rgb(117, 67, 255)); */ /* 테두리 */ border-style: solid !important; /* 모양 */ border-width: 4px !important; /* 두께 */ border-color: rgb(202, 77, 77) !important; /* 색깔 */ /* 글자에 밑줄 넣을지(underline), 말지(none) */ text-decoration: none !important; /* 테두리 둥근 정도 */ border-radius: 100px !important; /* 애니메이션 동작 */ transition-duration: 0.3s !important; /* 버튼 그림자 */ box-shadow: 2px 4px 6px rgba(0, 0, 0, 0.4) !important; /* 텍스트 그림자 */ text-shadow: 2px 4px 6px rgba(0, 0, 0, 0.2) !important; display: flex !important; justify-content: center !important; align-items: center !important; margin-left: auto !important; margin-right: auto !important; cursor: pointer !important; opacity: 1 !important; transition-property: all !important; line-height: 1.5 !important; text-align: center !important; white-space: nowrap !important; overflow: hidden !important; } ._my-button:hover { transform: scale(1.2) !important; background-color: rgb(96, 170, 255) !important; border-color: rgb(74, 143, 223) !important; } Box Shadow 꾸미기 사이트 https://getcssscan.com/css-box-shadow-examples