diff --git a/index.html b/index.html index bd916e9..37d0df5 100644 --- a/index.html +++ b/index.html @@ -9,8 +9,8 @@

✨ Style Your Buttons ✨

Apply custom styles to your button in the Style.css file

- - - + + + diff --git a/style.css b/style.css index be9cc43..a2c2c59 100644 --- a/style.css +++ b/style.css @@ -51,4 +51,147 @@ p { outline: none; } +.btn-1 { + background: rgb(0,172,238); + background: linear-gradient(0deg, rgba(0,172,238,1) 0%, rgba(2,126,251,1) 100%); + width: 130px; + height: 40px; + line-height: 42px; + padding: 0; + border: none; + + } + .btn-1 span { + position: relative; + display: block; + width: 100%; + height: 100%; + } + .btn-1:before, + .btn-1:after { + position: absolute; + content: ""; + right: 0; + top: 0; + background: rgba(2,126,251,1); + transition: all 0.3s ease; + } + .btn-1:before { + height: 0%; + width: 2px; + } + .btn-1:after { + width: 0%; + height: 2px; + } + .btn-1:hover{ + background: transparent; + box-shadow: none; + } + .btn-1:hover:before { + height: 100%; + } + .btn-1:hover:after { + width: 100%; + } + .btn-1 span:hover{ + color: rgba(2,126,251,1); + } + .btn-1 span:before, + .btn-1 span:after { + position: absolute; + content: ""; + left: 0; + bottom: 0; + background: rgba(2,126,251,1); + transition: all 0.3s ease; + } + .btn-1 span:before { + width: 2px; + height: 0%; + } + .btn-1 span:after { + width: 0%; + height: 2px; + } + .btn-1 span:hover:before { + height: 100%; + } + .btn-1 span:hover:after { + width: 100%; + } +/*btn 1*/ +.btn-2{ + width: 130px; + height: 40px; + line-height: 42px; + padding: 0; + border: none; + background: rgb(255,27,0); +background: linear-gradient(0deg, rgba(255,27,0,1) 0%, rgba(251,75,2,1) 100%); +} +.btn-2:hover { + color: #f0094a; + background: transparent; + box-shadow:none; +} +.btn-2:before, +.btn-2:after{ + content:''; + position:absolute; + top:0; + right:0; + height:2px; + width:0; + background: #f0094a; + box-shadow: + -1px -1px 5px 0px #fff, + 7px 7px 20px 0px #0003, + 4px 4px 5px 0px #0002; + transition:400ms ease all; +} +.btn-2:after{ + right:inherit; + top:inherit; + left:0; + bottom:0; +} +.btn-2:hover:before, +.btn-2:hover:after{ + width:100%; + transition:800ms ease all; +} +/* btn 2*/ +.btn-3{ + background: rgb(22,9,240); +background: linear-gradient(0deg, rgba(22,9,240,1) 0%, rgba(49,110,244,1) 100%); + color: #fff; + border: none; + transition: all 0.3s ease; + overflow: hidden; +} +.btn-3:after { + position: absolute; + content: " "; + top: 0; + left: 0; + z-index: -1; + width: 100%; + height: 100%; + transition: all 0.3s ease; + -webkit-transform: scale(.1); + transform: scale(.1); +} +.btn-3:hover { + color: #fff; + border: none; + background: transparent; +} +.btn-3:hover:after { + background: rgb(0,3,255); +background: linear-gradient(0deg, rgba(2,126,251,1) 0%, rgba(0,3,255,1)100%); + -webkit-transform: scale(1); + transform: scale(1); +} + /* Add your custom styles for btn-1, btn-2, and btn-3 */ \ No newline at end of file