The third installment to my famous Button Love series. Just hover your mouse to discover these beautifully themed buttons in action. Pure CSS(SCSS); absolutely no javascript.
A Pen by punit chawla on CodePen.
Created
December 7, 2022 09:23
-
-
Save pingpong00/425c1a31a9239e0c759806cce528f029 to your computer and use it in GitHub Desktop.
Button Love #3
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <div class="button"> | |
| <span>Button</span> | |
| </div> | |
| <div class="button2"> | |
| <span>Button</span> | |
| </div> | |
| <div class="button3"> | |
| <span><div>B</div><div>u</div><div>t</div><div>t</div><div>o</div><div>n</div></span> | |
| </div> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| html{ | |
| overflow-x:hidden; | |
| padding:0; | |
| margin:0; | |
| } | |
| body{ | |
| padding: 0; | |
| margin:0; | |
| } | |
| .button{ | |
| position: relative; | |
| top:0; | |
| left:0; | |
| width: 100%; | |
| height: 300px; | |
| white-space: nowrap; | |
| &:nth-child(1){ | |
| background: url(https://images.unsplash.com/photo-1538834536097-211cbe65d1bf?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=de95a7323777663c4e7bee805d9385e0&auto=format&fit=crop&w=1567&q=80) center center no-repeat; | |
| background-size: cover; | |
| } | |
| overflow: hidden; | |
| display: block; | |
| span{ | |
| transition: all 0.6s ease; | |
| font-size: 62px; | |
| font-weight: 800; | |
| font-family: sans-serif; | |
| position: absolute; | |
| top: 38%; | |
| left: 50%; | |
| transform: translate(-50%, -50%); | |
| padding: 6px; | |
| background: black; | |
| color: white; | |
| mix-blend-mode:overlay; | |
| border-radius: 4px; | |
| cursor: pointer; | |
| &:hover{ | |
| background: #fff; | |
| color: #000; | |
| padding: 100%; | |
| } | |
| } | |
| } | |
| .button2{ | |
| position: relative; | |
| top:0; | |
| left:0; | |
| width: 100%; | |
| height: 300px; | |
| background: url(https://images.unsplash.com/photo-1538964173425-93884d739596?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=e2f0390d79969aaf31e155bd1f7138b0&dpr=1&auto=format&fit=crop&w=1000&q=80&cs=tinysrgb) center center no-repeat; | |
| background-size: cover; | |
| overflow: hidden; | |
| display: block; | |
| span{ | |
| transition: all 0.6s ease; | |
| overflow: hidden; | |
| font-size: 62px; | |
| font-weight: 800; | |
| font-family: sans-serif; | |
| position: absolute; | |
| top: 45%; | |
| left: 50%; | |
| transform: translate(-50%, -50%); | |
| padding: 0px; | |
| color: white; | |
| border-radius: 4px; | |
| cursor: pointer; | |
| &::after{ | |
| content:''; | |
| display: block; | |
| position: absolute; | |
| bottom:-50px; | |
| left: -60px; | |
| width: 90px; | |
| height: 90px; | |
| background: #000; | |
| z-index: -1; | |
| box-shadow: 0px 0px 120px #024768, 0px 0px 120px #04B0BC, 0px 0px 120px #33C9C7, 0px 0px 120px #94DFDD,0px 0px 120px #97D3D3; | |
| transition: all 0.3s ease; | |
| transform: rotate(-45deg); | |
| } | |
| &:hover::after{ | |
| box-shadow: 40px -20px 0px #024768,41px -20px 8px rgba(0,0,0,0.3), 80px 20px 0px #04B0BC,81px 20px 8px rgba(0,0,0,0.3), 120px 60px 0px #22CBCB,121px 60px 8px rgba(0,0,0,0.3), 160px 100px 0px #94DFDD,161px 100px 8px rgba(0,0,0,0.3),200px 120px 0px #97D3D3; | |
| } | |
| &:hover{ | |
| box-shadow: 4px 34px 24px rgba(0,0,0,0.3); | |
| } | |
| } | |
| } | |
| .button3{ | |
| position: relative; | |
| top:0; | |
| left:0; | |
| width: 100%; | |
| height: 300px; | |
| background: url(https://images.unsplash.com/photo-1534823983341-d4e6e4aa046c?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=295c087fa2d537cab778f04c0c75cd3a&dpr=1&auto=format&fit=crop&w=1000&q=80&cs=tinysrgb) center center no-repeat; | |
| background-size: cover; | |
| overflow: hidden; | |
| display: block; | |
| span{ | |
| white-space: nowrap; | |
| div{ | |
| display: inline-block; | |
| position:relative; | |
| } | |
| div:nth-child(1){ | |
| transition: all 2s ease; | |
| &::after{ | |
| transition: all 1s ease; | |
| content:'B'; | |
| position: absolute; | |
| left:0px; | |
| top:0px; | |
| transform: rotateX(0deg); | |
| color: #FD1FBD; | |
| z-index: -1; | |
| } | |
| &::before{ | |
| transition: all 1.5s ease; | |
| content:'B'; | |
| position: absolute; | |
| left:0px; | |
| top:0px; | |
| transform: rotateX(0deg); | |
| color:#76EBF4; | |
| z-index: -2; | |
| } | |
| } | |
| div:nth-child(2){ | |
| transition: all 2s ease; | |
| &::after{ | |
| transition: all 1s ease; | |
| content:'u'; | |
| position: absolute; | |
| left:0px; | |
| top:0px; | |
| transform: rotateX(0deg); | |
| color: #FD1FBD; | |
| z-index: -1; | |
| } | |
| &::before{ | |
| transition: all 1.5s ease; | |
| content:'u'; | |
| position: absolute; | |
| left:0px; | |
| top:0px; | |
| transform: rotateX(0deg); | |
| color:#76EBF4; | |
| z-index: -2; | |
| } | |
| } | |
| div:nth-child(3){ | |
| transition: all 2s ease; | |
| &::after{ | |
| transition: all 1s ease; | |
| content:'t'; | |
| position: absolute; | |
| left:0px; | |
| top:0px; | |
| transform: rotateX(0deg); | |
| color: #FD1FBD; | |
| z-index: -1; | |
| } | |
| &::before{ | |
| transition: all 1.5s ease; | |
| content:'t'; | |
| position: absolute; | |
| left:0px; | |
| top:0px; | |
| transform: rotateX(0deg); | |
| color:#76EBF4; | |
| z-index: -2; | |
| } | |
| } | |
| div:nth-child(4){ | |
| transition: all 2s ease; | |
| &::after{ | |
| transition: all 1s ease; | |
| content:'t'; | |
| position: absolute; | |
| left:0px; | |
| top:0px; | |
| transform: rotateX(0deg); | |
| color: #FD1FBD; | |
| z-index: -1; | |
| } | |
| &::before{ | |
| transition: all 1.5s ease; | |
| content:'t'; | |
| position: absolute; | |
| left:0px; | |
| top:0px; | |
| transform: rotateX(0deg); | |
| color:#76EBF4; | |
| z-index: -2; | |
| } | |
| } | |
| div:nth-child(5){ | |
| transition: all 2s ease; | |
| &::after{ | |
| transition: all 1s ease; | |
| content:'o'; | |
| position: absolute; | |
| left:0px; | |
| top:0px; | |
| transform: rotateX(0deg); | |
| color: #FD1FBD; | |
| z-index: -1; | |
| } | |
| &::before{ | |
| transition: all 1.5s ease; | |
| content:'o'; | |
| position: absolute; | |
| left:0px; | |
| top:0px; | |
| transform: rotateX(0deg); | |
| color:#76EBF4; | |
| z-index: -2; | |
| } | |
| } | |
| div:nth-child(6){ | |
| transition: all 2s ease; | |
| &::after{ | |
| transition: all 1s ease; | |
| content:'n'; | |
| position: absolute; | |
| left:0px; | |
| top:0px; | |
| transform: rotateX(0deg); | |
| color: #FD1FBD; | |
| z-index: -1; | |
| } | |
| &::before{ | |
| transition: all 1.5s ease; | |
| content:'n'; | |
| position: absolute; | |
| left:0px; | |
| top:0px; | |
| transform: rotateX(0deg); | |
| color:#76EBF4; | |
| z-index: -2; | |
| } | |
| } | |
| &:hover div::after{ | |
| transform: rotateX(-1080deg); | |
| opacity:1; | |
| transform: scale(1.2); | |
| } | |
| &:hover div::before{ | |
| transform: rotateX(-1440deg); | |
| opacity:1; | |
| transform: scale(1.5); | |
| } | |
| &:hover div{ | |
| transform:rotateX(-1800deg); | |
| margin-left: 8px; | |
| } | |
| transition: all 2s ease; | |
| overflow: hidden; | |
| font-size: 82px; | |
| font-weight: 800; | |
| font-family: sans-serif; | |
| position: absolute; | |
| top: 45%; | |
| left: 50%; | |
| transform: translate(-50%, -50%); | |
| padding: 20px; | |
| color: white; | |
| border-radius: 4px; | |
| cursor: pointer; | |
| text-shadow: 0px 2px 2px rgba(0,0,0,0.3); | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment