Uporabne spletne strani
Stran z razlago HTML in CSS elementov ter primeri uporabe
Animirani premikajoči gumb
Koda za jo vnest v custom HTML polje
<a href="#section">
<button class="btn">
Get Instant Access To Bundle
</button>
</a>
<style>
.btn {
width: 400px;
height: 55px;
border-radius: 5px;
border: none;
background: #1255AF;
color: white;
font-size: 23px;
font-weight: 500;
line-height: 1;
}
.btn:hover {
transform: translateY(-10px);
}
</style>
Rezultat je spodnji gumb...
Animirani premikajoči gumb način z GUMBOM in HTML poljem
Koda za jo vnest v custom HTML polje
<style>
#button-0ea97064:hover {
transform: translateY(-8px);
transition-duration: 0.5s;
transition-property: transform;
transition-timing-function: ease-out;
}
</style>
Rezultat je spodnji gumb...
Animirani premikajoči gumb način z GUMBOM in HTML poljem
Koda za jo vnest v custom HTML polje
<style>
#button-24703d90 {
animation: rotation 1.3s infinite ease-in-out;
}
@keyframes rotation {
0% {
transform: rotate(3deg);
}
50% {
transform: rotate(-3deg);
}
100% {
transform: rotate(3deg);
}
}
</style>
Rezultat je spodnji gumb...
Animirani premikajoči gumb način z GUMBOM in HTML poljem
Koda za jo vnest v custom HTML polje
NAVODILO:
How to make this cool Button hover?
Step 1
Use a Gradient Background color on your button
Color 1: #39C697
Color 2: #686A97
Angle : 90
Step 2
Drag Raw Html, copy, and paste the code,
and replace "Type id here " with your button id
save and enjoy your cool hover
I will Put the code in the comments below
I hope you found this useful and want to listen from you what to do next in how to tips
PAZI NA PRESLEDKE MED #id in :hover (ne sme biti presledka)
HTML...
<style>
#button-3b7e1724:hover{
transform: scale(1.1);
-webkit-transition: all 1s ease;
}
#button-3b7e1724:hover {
background-image: linear-gradient(to right, #43e97b 0%, #38f9d7 100%);
border: 0px!important;
-webkit-box-shadow: 0px 14px 23px 0px rgba(98,106,115,0.4)!important;
-moz-box-shadow: 0px 14px 23px 0px rgba(98,106,115,0.4)!important;
box-shadow: 0px 14px 23px 0px rgba(98,106,115,0.4)!important;
</style>
Rezultat je spodnji gumb...
Animirani premikajoči gumb način z GUMBOM in HTML poljem
Koda za jo vnest v custom HTML polje
NAVODILO:
How to make this cool Button hover?
Step 1
Use a Gradient Background color on your button
Color 1: #39C697
Color 2: #686A97
Angle : 90
Step 2
Drag Raw Html, copy, and paste the code,
and replace "Type id here " with your button id
save and enjoy your cool hover
I will Put the code in the comments below
I hope you found this useful and want to listen from you what to do next in how to tips
PAZI NA PRESLEDKE MED #id in :hover (ne sme biti presledka)
HTML...
<style>
#button-1ff198a9{
transition: all 1s ease;
}
#button-1ff198a9:hover{
transform: scale(1.1);
}
#button-1ff198a9:hover {
background-image: linear-gradient(to right, #43e97b 0%, #38f9d7 100%);
border: 0px!important;
-webkit-box-shadow: 0px 14px 23px 0px rgba(98,106,115,0.4)!important;
-moz-box-shadow: 0px 14px 23px 0px rgba(98,106,115,0.4)!important;
box-shadow: 0px 14px 23px 0px rgba(98,106,115,0.4)!important;
}
</style>
Rezultat je spodnji gumb...
Animacija slike
Povečava slike, ko gremo z miško čez
HTML koda
<style>
#image-9d116572 {
display:block;
}
#image-9d116572:hover {
transform:scale(1.2);
transition: all .4s ease-in-out;
-webkit-transition: all 0.4s ease-in-out;
}
</style>
Premik v desno
HTML koda
<style>
#image-e3163c64 {
display:block;
}
#image-e3163c64:hover {
transform: translatex(8px);
transition-duration: 0.5s;
transition-property: transform;
transition-timing-function: ease-out;
}
</style>
TEST Animacija slike
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem dolore, alias, numquam enim ab voluptate id quam harum ducimus cupiditate similique quisquam et deserunt, recusandae.
TEST show text on hover ... Povečava slike, ko gremo z miško čez
HTML koda
<style>
#image-9d116572 {
display:block;
}
#image-9d116572:hover {
transform:scale(1.2);
transition: all .4s ease-in-out;
-webkit-transition: all 0.4s ease-in-out;
}
</style>
Premik v desno
HTML koda
<style>
#image-e3163c64 {
display:block;
}
#image-e3163c64:hover {
transform: translatex(8px);
transition-duration: 0.5s;
transition-property: transform;
transition-timing-function: ease-out;
}
</style>
Tekoča vrstica s sličicami
Scrolling line with pictures
<marquee direction= "left">
<img src="https://d1yei2z3i6k35z.cloudfront.net/1843477/6370cf01dd58d_alcatel.png" height="100">
<!-- komentar v kodi-->
<!-- <img src="https://d1yei2z3i6k35z.cloudfront.net/1843477/6370cffeac711_American-Express-scaled.jpg"> -->
<img src="https://d1yei2z3i6k35z.cloudfront.net/1843477/6370d00dd3d5f_apple.png" height="100">
<img src="" height="100">
<img src="" height="100">
</marquee>
If you want to improve, be content to be thought foolish and stupid.
History rewards the brave. So join them.
About
We love Bitcoin!
Email :
info2@thiswebsite.io
Phone :
+1 123 456 789
Address :
xx City, Country
