Mobil Sitede Buton Göstermek

Selamlar,

Desktop’a bu butonu ekledim. Bu buton mobilde büyük durduğundan media only ile ölçüsünü değiştirdim. Fakat bu görsel desktop’da, mobilde de bir farklı görsel kullanmak istiyorum. Sadece mobilde nasıl farklı bir butonu gösterebilirim?




Kodlar:

<div id="mybutton">
<a href="mailto:siteadresi.com"><img src="https://i.ibb.co/s2gGBfG/gif.gif" class="yuvarlak">
</a>
</div>
<style>
@media only screen and (max-width: 768px) {
/* mobil cihazlar için boyut */
.yuvarlak {
width: 100%;
height: auto;
margin-bottom: 10px;
margin-right: -70px;
}
}

img.yuvarlak {
border-radius: 100%;
}

#mybutton {
position: fixed;
bottom: 10px;
right: 10px;
}
</style>

mobil ve desktop icin iki adet button olusturup, bunlarin display ozellikleriyle oynarak istediginiz sonuca ulasabilirsiniz

Nasıl yapacağıma dair bilgi verirseniz memnun olurum hocam