css تىكى كۆپ قوللىنىلىدىغان ئالاھىدە ئۈنۈملەر.

charming · ۋاقتى: 2021-2-17 13:35:35

بىكەتكە ئەزا نامىڭىز بىلەن كىرسىڭىز تېخىمۇ كۆپ ئۇچۇرلارنى كۆرەلەيسىز

مۇنبىرىمىزگە تىزىملىتىپ كىرسىڭىز ئاندىن قوشۇمچە ھۆججەتنى كۆرەلەيسىز ياكى چۈشۈرەلەيسىز . تېخى تىزىملاتمىغانمۇ؟ تىزىملىتىڭ

x

سالام بىلىملەر مۇنبىرىدىكى دوسلار ياخشىمۇ سىلەر، مەن بۈگۈن سىلەرگە css تىنلا پايدىلىنىپ ئىشقا ئاشۇرۇلغان بىرقىسىم ئالاھىسە ئۈنۈملەرنى ئېلىپ كەلدىم، بۇ ئۈنۈملەر ھەممىس ھەركەتلىك، gif رەسىم ياساش قۇلايسىز بولغاچقا ئادەتتىكى ئۈنۈم رەسىمىنىمۇ بولسا يازمىغا قىستۇراي دىگەن، لىكىن بىر مۇنچە ھەپىلىشىپمۇ رەسىملەرنى قىستۇرالمىدىم شۇڭا توغرا چۈشەنگەن بولساڭلا، تۆۋەندە ھەر بىر ئۈنۈمنىڭ html كودى تەمىنلەندى.

1. مائۇسنى ئۈستىگە ئەكەلگەندە نۇر چاچىدىغان ئۈنۈم

<!DOCTYPE html>
<head>
<title>yankut saloni</title>
<style>
.base-btn {
display: flex;
align-items: center;
justify-content: space-around;
height: 100vh;
background: #031628;
}
.btn {
border: 1px solid;
background-color: transparent;
text-transform: uppercase;
font-size: 14px;
padding: 10px 20px;
font-weight: 300;
}
.one {
color: #4cc9f0;
}
.one:hover {
color: white;
border-color: #4cc9f0;
background-color: #4cc9f0;
-webkit-box-shadow: 10px 10px 99px 6px rgba(76, 201, 240, 1);
-moz-box-shadow: 10px 10px 99px 6px rgba(76, 201, 240, 1);
box-shadow: 10px 10px 99px 6px rgba(76, 201, 240, 1);
}
.two {
color: #f038ff;
}
.two:hover {
color: white;
border-color: #f038ff;
background-color: #f038ff;
-webkit-box-shadow: 10px 10px 99px 6px rgba(240, 56, 255, 1);
-moz-box-shadow: 10px 10px 99px 6px rgba(240, 56, 255, 1);
box-shadow: 10px 10px 99px 6px rgba(240, 56, 255, 1);
}
.three {
color: #b9e769;
}
.three:hover {
color: white;
border-color: #b9e769;
background-color: #b9e769;
-webkit-box-shadow: 10px 10px 99px 6px rgba(185, 231, 105, 1);
-moz-box-shadow: 10px 10px 99px 6px rgba(185, 231, 105, 1);
box-shadow: 10px 10px 99px 6px rgba(185, 231, 105, 1);
}
</style>
</head>
<body>
<div class="base-btn">
<button class="btn one">Hover one</button>
<button class="btn two">Hover two</button>
<button class="btn three">Hover three</button>
</div>
</body>
</html>

مەزمۇننى كۆچۈرۈۋېلىش

2.مائۇسنى ئۈستىگە ئېلىپ كەلگەندە ئەتراپىدا بىر رامكا ئالدىرىماي سىزىلىدىغان ئۈنۈم

<!DOCTYPE html>
<head>
<title>yankut</title>
<style>
#container {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
background-color: #031628;
}
button {
border: 0;
background: none;
text-transform: uppercase;
color: #f038ff;
font-weight: bold;
position: relative;
outline: none;
padding: 10px 20px;
box-sizing: border-box;
}
button::before,
button::after {
box-sizing: inherit;
position: absolute;
content: "";
border: 2px solid transparent;
width: 0;
height: 0;
}
button::after {
bottom: 0;
right: 0;
}
button::before {
top: 0;
left: 0;
}
button:hover::before,
button:hover::after {
width: 100%;
height: 100%;
}
button:hover::before {
border-top-color: #f038ff;
border-right-color: #f038ff;
transition: width 0.3s ease-out, height 0.3s ease-out 0.3s;
}
button:hover::after {
border-bottom-color: #f038ff;
border-left-color: #f038ff;
transition: border-color 0s ease-out 0.6s, width 0.3s ease-out 0.6s, height 0.3s ease-out 1s;
}
</style>
</head>
<body>
<div id="container">
<button>Hover me</button>
</div>
</body>
</html>

مەزمۇننى كۆچۈرۈۋېلىش

3.مائۇسنى ئۈستىگە ئېلىپ كەلگەندە قىرى ئالدىرىماي يۇمۇلاقلىشىدىغان ئۈنۈم

<!DOCTYPE html>
<head>
<title>yankut</title>
<style>
.border-btn {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
background-color: #031628;
}
button {
border: 0;
border-radius: 10px;
background: #2ec4b6;
text-transform: uppercase;
color: white;
font-size: 16px;
font-weight: bold;
padding: 15px 30px;
outline: none;
position: relative;
transition: border-radius 3s;
-webkit-transition: border-radius 3s;
}
button:hover {
border-bottom-right-radius: 50px;
border-top-left-radius: 50px;
border-bottom-left-radius: 10px;
border-top-right-radius: 10px;
}
</style>
</head>
<body>
<div class="border-btn">
<button>Hover me</button>
</div>
</body>
</html>

مەزمۇننى كۆچۈرۈۋېلىش

مائۇسنى ئۈستىگە ئېلىپ كەلگەندە مۇز تۇتقاندەك بولىدىغان ئۈنۈم

<!DOCTYPE html>
<head>
<title>yankut</title>
<style>
.frozen-btn {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
background-color: #031628;
}
button {
border: 0;
margin: 20px;
text-transform: uppercase;
font-size: 20px;
font-weight: bold;
padding: 15px 50px;
border-radius: 50px;
color: white;
outline: none;
position: relative;
}
button:before {
content: "";
display: block;
background: linear-gradient( to left, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0.4) 50%);
background-size: 210% 100%;
background-position: right bottom;
height: 100%;
width: 100%;
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
border-radius: 50px;
transition: all 1s;
-webkit-transition: all 1s;
}
.green {
background-image: linear-gradient(to right, #25aae1, #40e495);
box-shadow: 0 4px 15px 0 rgba(49, 196, 190, 0.75);
}
.purple {
background-image: linear-gradient(to right, #6253e1, #852d91);
box-shadow: 0 4px 15px 0 rgba(236, 116, 149, 0.75);
}
.purple:hover:before {
background-position: left bottom;
}
.green:hover:before {
background-position: left bottom;
}
</style>
</head>
<body>
<div class="frozen-btn">
<button class="green">Hover me</button>
<button class="purple">Hover me</button>
</div>
</body>
</html>

مەزمۇننى كۆچۈرۈۋېلىش

بۈگۈنچە مۇشۇنداراق يوللاپ تۇراي ئەتە يەنە بىر بۆلەك يوللىنىدۇ، سالونىمىزنى قۇشۋېلىش ئارقىلىق مۇ it تېخنىكىلىرى، كومپىيوتىر يۇمشاق دىتاللىرى، پىروگگىرامما تىلى بىلىملىرى قاتارلىق تىمىلاردىن بەھرىمان بولالايسىز.

charming · ۋاقتى: 2021-2-17 15:40:34

سالون ئىزدەش نامى yankut

bilimnur · ۋاقتى: 2021-2-17 20:15:04

ئىزدەپ تاپالمىغان كودلاركەن، مۇشۇنداق ئېسل بىلبىملەرنىنى داۋاملىق يوللىغايسىز!

bilimnur · ۋاقتى: 2021-2-17 20:15:43

مائۇسنى ئەكەلگەندە رەڭ ئۆزگەرتىش، ئالدىغا كەينىگە مىدىرايدىغان كودلار بولسا يوللىۋەتسىڭىز!

ھېسابات		ساقلاش	پارول قايتۇرىۋېلىش
پارول			تىزىملىتىڭ

مىكروبلوگ[ يېڭى | 24 سائەت | 7 كۈن | 30 كۈن ]

[HTML/CSS] css تىكى كۆپ قوللىنىلىدىغان ئالاھىدە ئۈنۈملەر.

بىكەتكە ئەزا نامىڭىز بىلەن كىرسىڭىز تېخىمۇ كۆپ ئۇچۇرلارنى كۆرەلەيسىز