css3 تە دائىم ئىھتىياجىمىز چۈشۈدىغان چىرايلىق ئۈنۈملەر (2)

بىكەت قۇرۇلغىنى بولدى

مائۇسنى ئۈستىگە ئەكەلگەندە كۇنۇپ كىنىڭ ئۈستىدە سۈزۈك بىر نۇر ئۇچۇپ ئۈتىدىغان ئۈنۈم، ئۈنۈم رەسىمى ۋە كودى تۆۋەندىكىدەك

 

css3 تە دائىم ئىھتىياجىمىز چۈشۈدىغان چىرايلىق ئۈنۈملەر (2)

<!DOCTYPE html>

<head>
   <title>yankut</title>
   <style>
       .shiny-shadow {
           display: flex;
           align-items: center;
           justify-content: center;
           height: 100vh;
           background-color: #031628;
      }
       
       button {
           border: 2px solid white;
           background: transparent;
           text-transform: uppercase;
           color: white;
           padding: 15px 50px;
           outline: none;
           overflow: hidden;
           position: relative;
      }
       
       span {
           z-index: 20;
      }
       
       button:after {
           content: “”;
           display: block;
           position: absolute;
           top: -36px;
           left: -100px;
           background: white;
           width: 50px;
           height: 125px;
           opacity: 20%;
           transform: rotate(-45deg);
      }
       
       button:hover:after {
           left: 120%;
           transition: all 600ms cubic-bezier(0.3, 1, 0.2, 1);
           -webkit-transition: all 600ms cubic-bezier(0.3, 1, 0.2, 1);
      }
   </style>
</head>

<body>
   <div class=“shiny-shadow”>
       <button><span>Hover me</span></button>
   </div>
</body>

</html>

ۇسنى ئۈستىگە ئەكەلگەندە تەگلىكى سولدىن ئوڭغا ئاستا سۈرۈلۈپ پەيدا بولۇپ، مائۇسنى ئەكەتكەندە يوقاپ كىتىدىغان ئۈنۈم. ئۈنۈم رەسىمى ۋە كودى تۆۋەندىكىدەك.

 

css3 تە دائىم ئىھتىياجىمىز چۈشۈدىغان چىرايلىق ئۈنۈملەر (2)

<!DOCTYPE html>

<head>
   <title>yankut</title>
   <style>
       .loading-btn {
           display: flex;
           align-items: center;
           justify-content: center;
           height: 100vh;
           background-color: #031628;
      }
       
       button {
           background: transparent;
           border: 0;
           border-radius: 0;
           text-transform: uppercase;
           font-weight: bold;
           font-size: 20px;
           padding: 15px 50px;
           position: relative;
      }
       
       button:before {
           transition: all 0.8s cubic-bezier(0.7, -0.5, 0.2, 2);
           content: ;
           width: 1%;
           height: 100%;
           background: #ff5964;
           position: absolute;
           top: 0;
           left: 0;
      }
       
       button span {
           color: #ff0036;
      }
       
       button:hover:before {
           background: #ff5964;
           width: 100%;
      }
       
       button:hover span {
           mix-blend-mode: darken;
      }
   </style>
</head>

<body>
   <div class=“loading-btn”>
       <button><span>Hover me</span></button>
   </div>
</body>

</html>

ىرايلىق رامكا ئۈنۈمى، ئۈنۈم رەسىمى ۋە كودى تۆۋەندىكىدەك.

 

css3 تە دائىم ئىھتىياجىمىز چۈشۈدىغان چىرايلىق ئۈنۈملەر (2)

<!DOCTYPE html>

<head>
   <title>yankut</title>
   <style>
       .container {
           display: flex;
           justify-content: center;
           align-items: center;
           width: 100%;
           height: 100vh;
           background-color: #f7f8fa;
      }
       
       .card {
           display: flex;
           justify-content: center;
           align-items: center;
           padding: 24px;
           background-color: #fff;
           border-radius: 12px;
           box-shadow: 0 8px 12px #ebedf0;
           width: 300px;
           height: 200px;
      }
   </style>
</head>

<body>
   <div class=“container”>
       <div class=“card”>
          我是卡片
       </div>
   </div>
</body>

</html>


原文始发于微信公众号(yankut):css3 تە دائىم ئىھتىياجىمىز چۈشۈدىغان چىرايلىق ئۈنۈملەر (2)

https://izdag.cn/ سىزنىڭ ياخشى دوستىڭىز
ئىزدەڭ تورى » css3 تە دائىم ئىھتىياجىمىز چۈشۈدىغان چىرايلىق ئۈنۈملەر (2)

发表评论

ئىزدەڭ تور بىتى ھەرخىل دەرسلىكلەر بىلەن تەمىن ئىتىدۇ

ئەزا بولاي چۇشۇنۇپ باقاي