Advertisement
Cyalana

[ Otros ] Hojitas

Jun 18th, 2019
258
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 1.14 KB | None | 0 0
  1. <link href="https://fonts.googleapis.com/css?family=Unica+One&display=swap" rel="stylesheet"> <div class="hojas-relativas"> <a class="verde-ecologico" href="LINKAQUÍ">Hojitas <div class="hover-raro"></div></a></div>
  2.  
  3. <style>.hojas-relativas {height: 200px; width: 200px; margin: 100px auto; position: relative;} .verde-ecologico {background: #458534; height: 200px; width: 200px; margin: auto; border-radius: 100%; display: block; transition: all 0.5s ease-in-out; color: #fff!important; text-align: center; font-size: 40px; line-height: 200px; font-family: 'Unica One', cursive; text-decoration: none;} .verde-ecologico:hover {background: #BBDB6A; transition: all 0.5s ease-in-out; -ms-transform: rotate(45deg); /* IE 9 */ -webkit-transform: rotate(45deg); /* Safari 3-8 */ transform: rotate(45deg);} .hover-raro { border: 5px solid rgba(0,0,0,0.0); height: 200px; width: 200px; border-radius: 100%; margin-top:-205px; margin-left: -5px; transition: all 0.5s ease-in-out;} .hover-raro:hover { opacity: 1; animation: ecos 1000ms linear infinite; border-color: #BBDB6A;transition: all 0.5s ease-in-out;} @keyframes ecos {to {transform: scale(1.2); opacity: 0;}}</style>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement