Creación de html de widget / gadget con Iconos de Redes sociales, y que al darle click se redireccione a otra pagina un url, también añadirle que al ponerse sobre el icono de red social el puntero del mouse, este se baje.
HTML de widget - Gadget de iconos de redes sociales, redireccionan links a una ventana nueva y al pasar el mouse por encima del icono, este se sube unos milímetros para arriba.
CODIGO HTML:
<!DOCTYPE html>
<html>
<head>
<style>
/* Estilo para el contenedor de los iconos */
.social-icons {
display: flex;
justify-content: center;
gap: 5px; /* Espacio entre los iconos */
padding: 0px;
}
/* Estilo para cada ícono */
.social-icons a {
display: inline-block;
transition: transform 0.3s ease; /* Transición suave */
}
/* Efecto al pasar el cursor: el ícono baja */
.social-icons a:hover {
transform: translateY(10px); /* Baja 10 píxeles */
}
/* Estilo para las imágenes de los iconos */
.social-icons img {
width: 20px; /* Tamaño de los iconos, ajusta según necesites */
height: 20px;
object-fit: contain;
}
</style>
</head>
<body>
<div class="social-icons">
<!-- Icono de PayPal -->
<a href="https://rebrand.ly/BrayanRockerPayPal" target="_blank">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsocbfuixFV_UmvZCqHimy39IzIn-I0KoGZc2XpJhSY8qfAmugK6PBGCfcmfvQk_TT2DjwxYoaWYUwQKzF5kNmcNdqMSZbt-38awnH1dGsx2upu2L5Zu3GeoNAXazW1OJ9mv53MdCv3o6Qzm8z17TkNmtwMmGBRX3w6qI2-XwgcK_nohu4GK0RBhrZ3zg/w320-h320/packs%20de%20iconos%20de%20red%20social%20-%20BrayanRocker%20-%20paypal.png" alt="PayPal">
</a>
<!-- Icono de Whatsapp -->
<a href="https://rebrand.ly/WhatsappBrayanRocker" target="_blank">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdNX8IXSmSZ-lrBlSAaytUcoLMcVebdLxloxCih3BCWjSOvBjGuNZ2xCwveIxO-QW6rIKKl8JSR2mb75AoVsRfNCm0JyELo9YWTB15hyphenhyphenfdRJ728hkykd47s1XbqPrJcozA5PIFBovcHWYjN_lvANk9eu4Ai-T3s5vpHw0Ca6o54rniUd5YXrfDcMDPtHk/s486/packs%20de%20iconos%20de%20red%20social%20-%20BrayanRocker%20-%20whatsapp.png" alt="Whatsapp">
</a>
<!-- Icono de Telegram -->
<a href="https://rebrand.ly/TelegramBrayanRocker" target="_blank">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwKXR3bu1CUPOWJqEpVWyVBFfxKOtBnKPeP67fmafsj2d2HQ8VDuXGN1B78LZxWgdbfPoFqKuTtMDpSzx4mL56FEa5eNV595Tin58qU7NB0IFgq1e2nPwnOUxvsgBoR4qbj_r1jCs_oWs1Ym0aG-FrwVufbrMUaIn0BqD3J4gfL7ZExDyDYrt5WsyD1lo/s320/packs%20de%20iconos%20de%20red%20social%20-%20BrayanRocker%20-%20telegram.png " alt="Telegram">
</a>
<!-- Icono de soundcloud -->
<a href="https://rebrand.ly/soundcloudbrayanrocker" target="_blank">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgoCBdB5C3G7pG7duA072DLwIzAEHb8KUOhlby1ezeC4ZkhjveDyr814EpRky1pAo5T630s94wUzczU0vUco2pb9O9KoYI-qP4jZTPl7s8ag5yN0o49cJlEULJm7CHSZtnnxdKfVbj5OyshYxFiGTTDONATEcTWw88L0dg0yXL8wD9TTCFxUwEUWQx9Upw/s320/packs%20de%20iconos%20de%20red%20social%20-%20BrayanRocker%20-%20soundcloud.png" alt="soundcloud">
</a>
<!-- Icono de Dailymotion -->
<a href="https://rebrand.ly/DailymotionBrayanRocker" target="_blank">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYRtIvxFX2d450dX4_4kZss-rDZ6kB1573DmxaPkIyKlkzaiwWaFdYxywEqQKSuOxkS7B__26xu8IiYxsKguTEtnKnQYLRiNd96L9xzIILIcp5OGA1PzSQwzjPksanORGbhr8FPlaAr9DrKk_6qHwVkDQRnq4j1nJ0mbtNmHePS2Wa_3nNKQO71SL7lmY/s2615/packs%20de%20iconos%20de%20red%20social%20-%20BrayanRocker%20-%20Dailymotion.png" alt="Dailymotion">
</a>
<!-- Icono de YouTube -->
<a href="https://rebrand.ly/BrayanRockerYoutube" target="_blank">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJM0PnQnp994BvKTP1GvVOWMc6tEaHeh7RhiIFUNTbIXwWONVIKjjwUZyb0rbiZNUpGUsyoMggBMvULFbexa9yE76nf2WEErFjd6Gq7UURz9vGCFJUIRlPt5CVMF6OdhGBPYetT3y2IZkbd-Ks12tquHE1cSrV8UiZ5P_OJk9VjDT1EYcjuFVwBlKl4WI/s320/packs%20de%20iconos%20de%20red%20social%20-%20BrayanRocker%20-%20youtube.png" alt="YouTube">
</a>
<!-- Icono de Twitch -->
<a href="https://rebrand.ly/TwitchBrayanrocker" target="_blank">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMp2ukXHe7ro_ffwAe8U0UsHUbOOZaN5EvRuH0TFkHU-uDBux3J6FKaG5e8S3_NfrWXJQk5aSMVikdk7N4jlwb_IKZhg7lTlfI2Yr0602hMmpHQCsYec68TELjvnzn7cQOlE__tBVrQLVKhZ-YABDoGG4apZCwnLs1_oSUdZLltoWW37YnXBNLfN178Js/s320/packs%20de%20iconos%20de%20red%20social%20-%20BrayanRocker%20-%20Twitch.png" alt="Twitch">
</a>
<!-- Icono de Steam -->
<a href="https://rebrand.ly/BrayanRockerSteam" target="_blank">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCCzJWRXwPrZ9fSLMLg8mS0oY803FMqQfT4fV_7qB96spEM9DO3Ualj02GAVs8UHkThuNAXxwypaK-iuGOhz1VNfhimoKgP5JJFFJpKkI824cXk460UW98GR0xcT_lBacx7mZjTb94WDH85vASTxFhqnxEndfkIX68sVfw7oUY0s31cxq9F7FTxaOSQTU/s1587/packs%20de%20iconos%20de%20red%20social%20-%20BrayanRocker%20-%20steam.png" alt="Steam">
</a>
<!-- Icono de wordpress -->
<a href="https://rebrand.ly/wordpressbrayanrocker" target="_blank">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxuyK9dMm117rX45emd7LJkr-em0USWXhZbLwzaR6HTXtOZh44_xfBcG22PCKnqpjfrUeuWUnwy3KMI2wJdLjrb6m6HudyaM2kLDm2tYhbmjkFnR4TajOatt5CWmGrlaTcYOhUCaRzpd3Ak1iif1pWZpQ_V4Ul-ZypQSes2eP7AmxIQZ_FvVOwFcIFneI/s320/packs%20de%20iconos%20de%20red%20social%20-%20BrayanRocker%20-%20Wordpress.png" alt="wordpress">
</a>
<!-- Icono de Blog -->
<a href="https://rebrand.ly/BrayanRockerBlog" target="_blank">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSsREqzh1a6M0jmSdPJ7xz1e1jX3SWDeYImizk_YOWbt4XL7uu1p6jsmuZKHkhWVxUGSAA6Jk7lGf9tgCSruJmEeVKS8o7KqZCBhcSnf6zguzgn4c0XjtQsGCiHVxliOUU26WLRa3OxBljzEajkKgu0oGyC9ymU05q89qaF8WjCA0XxJs_9cIfBIAm2wg/s320/packs%20de%20iconos%20de%20red%20social%20-%20BrayanRocker%20-%20blogger.png" alt="Blog">
</a>
<!-- Icono de rutube -->
<a href="https://rebrand.ly/rutube" target="_blank">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhopwIlDBDlt3N838QuW2PN7OYQprdKI7YxnStJnpqGRvl0e9y7CROtH6ee7nb9Ub4CS4h6XgOn1ojEiSraFUlEpj74wVE8pIqDMEcRpqoaiZDpcSnFOhlJUWw5qBKg_kqwAGgU8p_UKFdxREfComURi596QHjTgcGsIRhIvIRgyuK57JXOo8FuY-fhvwA/s320/packs%20de%20iconos%20de%20red%20social%20-%20BrayanRocker%20-%20rutube.png" alt="rutube">
<!-- Icono de jimdo -->
<a href="https://rebrand.ly/jimdo" target="_blank">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitPc7m_KcASbZfIUKJxBMiP-EbHfUKkW8i5-tSDPO9s9-T4kdGzU1mjBpgIaC6R0PYeefoVAH0c2KPORsLAU1wsywMHcMfykvXN3Eq1kwcWYPZAdS30xe57oeADKR_-ZkHP1pn46cQ8j-4p-_MtEYHh_FeqOffWQQVz3MiAv1en0qmFwSguTkif-quGhU/s320/packs%20de%20iconos%20de%20red%20social%20-%20BrayanRocker%20-%20Jimdo.png" alt="jimdo">
</a>
</a>
<!-- Icono de rentry -->
<a href="https://rebrand.ly/rentryBrayanRocker" target="_blank">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiaAaeB2epQ4R86or9lvZRujL4_HyDZETCAKpptWHnmx-0ewVDaxuEXlXIsTpU4j37Tu-rttj3zKnQ0LU-kd9yRIoXTFkB-gaj8e9JolCdCS04hyphenhyphenNG92IJlxrghZAZMYSzTc1jRTryoHugaSyNtOUUEXYyJBm97fwXA2MYy0lAg9tvWI8ENpMts-vU-n2w/s320/packs%20de%20iconos%20de%20red%20social%20-%20BrayanRocker%20-%20rentry.png" alt="rentry">
</a>
<!-- Icono de TikTok -->
<a href="https://rebrand.ly/TikTok-BrayanRocker" target="_blank">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhynhmA57rhNQ049OxIHqiz-nUZwsi2gV_WPkrm89k39tWGqAZpt8rIExBPh98c0c6b1C-m2Ih-_g7Kr96Xwc8h4h2IyQOdba8-wJlejmnQuJxPJPkyGd2y741bqGmHjEeljIoeWIppXWAL7x57thvRYqv6xS2XBq2DXkOC7QEkStf_iV_2B3s8EPMADSQ/s320/packs%20de%20iconos%20de%20red%20social%20-%20BrayanRocker%20-%20tiktok.png" alt="TikTok">
</a>
<!-- Icono de Likee -->
<a href="https://rebrand.ly/LikeeBrayanRocker" target="_blank">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwskwNi8MxSMYQmHEFWlWJHFQ6FCH-dGeSX3oqxWwIwCjOrvV1kPURy3Ir7Zsmvm5hsTStaT6HEmfYlk19IEZ-w6lS5V9ijyFPVVepgI0ASkAgKjdnzBdKEwnYgPaKlGVhy0L6BmRgugLIy9682Nw8D4tqWtbGhAU4ItdEwjS3wIdG-X1G8TiOgf3E_2I/s320/packs%20de%20iconos%20de%20red%20social%20-%20BrayanRocker%20-%20Likee.png" alt="Likee">
</a>
<!-- Icono de Instagram -->
<a href="https://rebrand.ly/InstagramBrayanRocker" target="_blank">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPMSknHyif3UzRYfvQJ4ll1aAjarmB8UHMk4uI0EYd2WDHx9_QRm44Hntpa3ZlTneDiQ1Rsc9eOtEiJaxPRtJI2O2884ddQkM7wjHgsyL4MkGMBQC7qjnFfni11SGYh2q7u7v1LlZnrD1yp5ni5I8UmrTJohA0t5X5sLB2EqoDk9EuUyHK1Xgo6DNIoJ4/s320/packs%20de%20iconos%20de%20red%20social%20-%20BrayanRocker%20-%20instagram.png" alt="Instagram">
</a>
<!-- Icono de Pinterest -->
<a href="https://rebrand.ly/PinterestBrayanRocker" target="_blank">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkrQJIeHfzysDVmIl-kHdH_x-Ct87PU1qga0yjWrye-6Euyf4WynqyhCJSwobYIOmkkVUqLhhSIoaymoVAyhSHuaaDsrKejjPMX3ImqHBCEsEROC_UFeuQt9o3fCX8QT3fCuANtdlwohaRVa-36DAvIU3EP587ziJXT0oiTm33sjl62hoYZ9abUW5BIMM/s320/packs%20de%20iconos%20de%20red%20social%20-%20BrayanRocker%20-%20Pinterest.png" alt="Pinterest">
</a>
<!-- Icono de Facebook -->
<a href="https://rebrand.ly/FacebookBrayanRocker" target="_blank">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTF8MxTh38UvYf9JXbBKSJH1enS-WAB9D_dr5BIas9NtFcqIiDzsbbDHsQmY7R8S45QNg0f9WQ42a0PaIsDnttCLHwVkpy3OA0WjLYxWLT-UdXz4-6wn5U7Tu9pPzJGYdiKRvNqEBl5LJCMOcXtqoEL485qxHTnY_hGhe3ztaC0mdQQUBsaXTmrDtSCfE/s320/packs%20de%20iconos%20de%20red%20social%20-%20BrayanRocker%20-%20facebook.png" alt="Facebook">
</a>
<!-- Icono de Tublogcristiano -->
<a href="https://rebrand.ly/Tublogcristiano" target="_blank">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvnPv_xyw31pZag3ZNcus84gzFQbqpG9ei7qcBApVW41s6lYq-4KAPQdiusLZPlR_g3XBYHolYw8mqclZUy5AqNjLD49yueeqd1MEzVVC9_GzcGcHTYo2Y9m4IDjiUMcU7ZZseypJSxN-tOHscjtv5GCdbcsdXkuARgmm3LSh0TwmPY7C8GCuRyEFYABc/s320/packs%20de%20iconos%20de%20red%20social%20-%20BrayanRocker%20-%20facebook%20Tu%20Blog%20Cristiano.png" alt="Tublogcristiano">
</a>
<!-- Icono de VK -->
<a href="https://rebrand.ly/VkBrayanRocker" target="_blank">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWPmDY9VYxaWY5twgNg5EbbnK4jmnC5hN9KyjcvnzUb9Lv3F_XqHWjUSemdcdaZ_mG7XnSFAljB9UhUdWsgO64pfdWArIF29i1JwNfugNYHBKZs3V0LrdG9J0Th1Sbv6ItNeaW93Znd1ixwUZQ-w_p29YyCbc1NEqx-y45wGtNtCndg5VGrgMmYs-gU4Q/s320/packs%20de%20iconos%20de%20red%20social%20-%20BrayanRocker%20-%20VK.png" alt="VK">
</a>
<!-- Icono de Twitter -->
<a href="https://rebrand.ly/TwitterBrayanRocker" target="_blank">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_eQzhyphenhyphenOGp1W7TWs1ry7e-BowCPDd8YTN5ExfBeE_MQtbyoNaJD0dENapRmAG4HCVcZoHhP-Hfwo3IN5DQ4a1QO2RUCmUoKaEMVZG1rGwYzrZiUnYaEE56vQSPfSA7I4PuJF6BNxjDzUGmBQCaWk5tKz-Yh2dHFjleGSHybKel1EK36F6sRreu8bxioDI/s320/packs%20de%20iconos%20de%20red%20social%20-%20BrayanRocker%20-%20Twitter.png" alt="Twitter">
</a>
<!-- Icono de Mex tl -->
<a href="https://rebrand.ly/mextl" target="_blank">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfj6YsC8zpkSbAb0DVrQcwqc0ER2lBTw1IQHhh9tQ7dOvA55qdQNxlcm7AeRAIFgdGqCQLN-RH2eokkJ5bkqPdhL9E9D38LB9sJQRZBKnkN9XhEaC3BpjlP2U7dVGBYON8ms04fN5udmCBbzX9JT2eX2_ZD3-dLqZ5ORyLk13Hxje3ewDg9fzueUEmn7w/w320-h274/packs%20de%20iconos%20sociales%20-%20BrayanRocker%20-%20mextl.png" alt="Twitter">
</a>
</div>
</body>
</html>
IMAGENES USADAS:
