تركيب ازرار تحميل و معاينة

  

  <style>

.btn-bubble{color:white;background-color:#77b11c;background-repeat:no-repeat}

.btn-bubble:hover,.btn-bubble:focus{-webkit-animation:bubbles 1s forwards ease-out;animation:bubbles 1s forwards ease-out;background:radial-gradient(circle at center,rgba(0,0,0,0) 30%,#eeeeff 60%,#eeeeff 65%,rgba(0,0,0,0) 70%) 87% 119% / 1.08em 1.08em,radial-gradient(circle at center,rgba(0,0,0,0) 30%,#eeeeff 60%,#eeeeff 65%,rgba(0,0,0,0) 70%) 91% 91% / 0.71em 0.71em,radial-gradient(circle at center,rgba(0,0,0,0) 30%,#eeeeff 60%,#eeeeff 65%,rgba(0,0,0,0) 70%) 37% 97% / 1.13em 1.13em,radial-gradient(circle at center,rgba(0,0,0,0) 30%,#eeeeff 60%,#eeeeff 65%,rgba(0,0,0,0) 70%) 7% 84% / 1.16em 1.16em,radial-gradient(circle at center,rgba(0,0,0,0) 30%,#eeeeff 60%,#eeeeff 65%,rgba(0,0,0,0) 70%) 87% 107% / 0.86em 0.86em,radial-gradient(circle at center,rgba(0,0,0,0) 30%,#eeeeff 60%,#eeeeff 65%,rgba(0,0,0,0) 70%) 1% 99% / 0.79em 0.79em,radial-gradient(circle at center,rgba(0,0,0,0) 30%,#eeeeff 60%,#eeeeff 65%,rgba(0,0,0,0) 70%) 39% 117% / 0.6em 0.6em,radial-gradient(circle at center,rgba(0,0,0,0) 30%,#eeeeff 60%,#eeeeff 65%,rgba(0,0,0,0) 70%) 40% 90% / 0.6em 0.6em,radial-gradient(circle at center,rgba(0,0,0,0) 30%,#eeeeff 60%,#eeeeff 65%,rgba(0,0,0,0) 70%) -1% 130% / 1.1em 1.1em,radial-gradient(circle at center,rgba(0,0,0,0) 30%,#eeeeff 60%,#eeeeff 65%,rgba(0,0,0,0) 70%) 82% 129% / 0.65em 0.65em,radial-gradient(circle at center,rgba(0,0,0,0) 30%,#eeeeff 60%,#eeeeff 65%,rgba(0,0,0,0) 70%) 79% 150% / 0.62em 0.62em;background-color:#f9ca24;background-repeat:no-repeat}

@-webkit-keyframes bubbles{100%{background-position:85% 4%,100% -8%,39% -46%,-1% -55%,88% -157%,-1% -99%,38% -269%,48% -79%,4% -337%,79% -203%,86% -164%;box-shadow:inset 0 -6.5em 0 #0072c4}}

@keyframes bubbles{100%{background-position:85% 4%,100% -8%,39% -46%,-1% -55%,88% -157%,-1% -99%,38% -269%,48% -79%,4% -337%,79% -203%,86% -164%;box-shadow:inset 0 -6.5em 0 #0072c4}}

.btn{display:inline-block;text-decoration:none;padding:1em 2em}

.btn-bubble1{color:white;background-color:#EA2027;background-repeat:no-repeat}

.btn-bubble1:hover,.btn-bubble1:focus{-webkit-animation:bubbles 1s forwards ease-out;animation:bubbles 1s forwards ease-out;background:radial-gradient(circle at center,rgba(0,0,0,0) 30%,#eeeeff 60%,#eeeeff 65%,rgba(0,0,0,0) 70%) 87% 119% / 1.08em 1.08em,radial-gradient(circle at center,rgba(0,0,0,0) 30%,#eeeeff 60%,#eeeeff 65%,rgba(0,0,0,0) 70%) 91% 91% / 0.71em 0.71em,radial-gradient(circle at center,rgba(0,0,0,0) 30%,#eeeeff 60%,#eeeeff 65%,rgba(0,0,0,0) 70%) 37% 97% / 1.13em 1.13em,radial-gradient(circle at center,rgba(0,0,0,0) 30%,#eeeeff 60%,#eeeeff 65%,rgba(0,0,0,0) 70%) 7% 84% / 1.16em 1.16em,radial-gradient(circle at center,rgba(0,0,0,0) 30%,#eeeeff 60%,#eeeeff 65%,rgba(0,0,0,0) 70%) 87% 107% / 0.86em 0.86em,radial-gradient(circle at center,rgba(0,0,0,0) 30%,#eeeeff 60%,#eeeeff 65%,rgba(0,0,0,0) 70%) 1% 99% / 0.79em 0.79em,radial-gradient(circle at center,rgba(0,0,0,0) 30%,#eeeeff 60%,#eeeeff 65%,rgba(0,0,0,0) 70%) 39% 117% / 0.6em 0.6em,radial-gradient(circle at center,rgba(0,0,0,0) 30%,#eeeeff 60%,#eeeeff 65%,rgba(0,0,0,0) 70%) 40% 90% / 0.6em 0.6em,radial-gradient(circle at center,rgba(0,0,0,0) 30%,#eeeeff 60%,#eeeeff 65%,rgba(0,0,0,0) 70%) -1% 130% / 1.1em 1.1em,radial-gradient(circle at center,rgba(0,0,0,0) 30%,#eeeeff 60%,#eeeeff 65%,rgba(0,0,0,0) 70%) 82% 129% / 0.65em 0.65em,radial-gradient(circle at center,rgba(0,0,0,0) 30%,#eeeeff 60%,#eeeeff 65%,rgba(0,0,0,0) 70%) 79% 150% / 0.62em 0.62em;background-color:#FFC312;background-repeat:no-repeat}

@-webkit-keyframes bubbles1{100%{background-position:85% 4%,100% -8%,39% -46%,-1% -55%,88% -157%,-1% -99%,38% -269%,48% -79%,4% -337%,79% -203%,86% -164%;box-shadow:inset 0 -6.5em 0 #F79F1F}}

@keyframes bubbles1{100%{background-position:85% 4%,100% -8%,39% -46%,-1% -55%,88% -157%,-1% -99%,38% -269%,48% -79%,4% -337%,79% -203%,86% -164%;box-shadow:inset 0 -6.5em 0 #0072c4}}

.btn1{display:inline-block;text-decoration:none;padding:1em 2em}

</style>