diff --git a/buttons/buttons.css b/buttons/buttons.css index d3dc362..34e4dc8 100644 --- a/buttons/buttons.css +++ b/buttons/buttons.css @@ -2703,3 +2703,39 @@ a:focus-visible { } } + +/* adilcodes-btn-1 start */ +.adilcodes-btn-1{ + border: 0; + cursor: pointer; + padding: 13px 32px; + font-size: 14px; + position: relative; + z-index:0; + transition: 0.3s ease 0.1s; + overflow: hidden; + background-color: #fff; + box-shadow: 0px 0px 5px 1px #00000011; +} +.adilcodes-btn-1::after{ + content: ""; + position: absolute; + top: 0; + left: 0; + width: 0%; + height: 100%; + background-color: rgb(252, 40, 71); + transition: 0.5s ease; + z-index: -1; + scale: 0.6; +} +.adilcodes-btn-1:hover::after{ + width: 100%; + scale: 1.21; + /* rotate: 180deg; */ + transform: rotateX(180deg) rotateZ(45deg); +} +.adilcodes-btn-1:hover{ + color: #fff; +} +/* adilcodes-btn-1 end */ \ No newline at end of file diff --git a/index.html b/index.html index 908f416..0e19ad3 100644 --- a/index.html +++ b/index.html @@ -633,10 +633,10 @@ <div class="button-container "> <button class="gauravsharmatheofficial-btn-1"> <svg class="gauravsharmatheofficial-btn-1-svg" width="180px" height="60px" viewBox="0 0 180 60"> - <polyline points="179,1 179,59 1,59 1,1 179,1"/> - <polyline points="179,1 179,59 1,59 1,1 179,1"/> - </svg> - <span class="gauravsharmatheofficial-btn-1-span"> Hover Me </span></button> + <polyline points="179,1 179,59 1,59 1,1 179,1" /> + <polyline points="179,1 179,59 1,59 1,1 179,1" /> + </svg> + <span class="gauravsharmatheofficial-btn-1-span"> Hover Me </span></button> <div class="createdby-section"> Created by <a href="https://github.com/gauravsharmatheofficial">gauravsharmatheofficial</a> @@ -666,8 +666,8 @@ </div> <!--0b51d14n217's btn--> - - + + <!--lavesh's btn--> <div class="button-container"> <a class="lavesh-btn-1" data-back="Hover Me" data-front="Hover Me">Hover me</a> @@ -708,6 +708,17 @@ </div> <!-- Amit's btn--> + <!-- adilcodes-btn-1 start --> + <div class="button-container"> + <!-- add your buttons here, eg.--> + <button class="adilcodes-btn-1">Hover Me</button> + <div class="createdby-section"> + Created by + <a href="https://github.com/adilcodes">adilcodes</a> + </div> + </div> + <!-- adilcodes-btn-1 end --> + </div> @@ -763,4 +774,4 @@ </body> -</html> +</html> \ No newline at end of file