screen_rotation
Copied to Clipboard
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css" crossorigin="anonymous" referrerpolicy="no-referrer" /> </head> <body> <div class="container"> <h1>Font Awesome 5 Youtube Square HTML|CSS (Fab fa-square-youtube) </h1> <p>Youtube Sqaure icon with button: <a class="youtube-square-button" href="#"><i class="fab fa-square-youtube"> </i> Watch Movie us on Youtube </a> </p> <p>Default Size: <i class="fab fa-square-youtube"></i></p> <p>Size 2xs: <i class="fab fa-square-youtube fa-2xs"></i></p> <p>Size xs : <i class="fab fa-square-youtube fa-xs"></i></p> <p>Size sm :<i class="fab fa-square-youtube fa-sm"></i></p> <p>Size lg : <i class="fab fa-square-youtube fa-lg"></i></p> <p>Size xl : <i class="fab fa-square-youtube fa-xl"></i></p> <p>Size 2xl : <i class="fab fa-square-youtube fa-2xl"></i></p> </div> <style> /* Style for the Google Play button */ .youtube-square-button { background-color: #3b5998; /* Facebook blue */ color: #fff; /* White text color */ padding: 10px 15px; border: none; border-radius: 5px; cursor: pointer; font-size: 16px; text-decoration: none; } .youtube-square-button i { margin-right: 5px; } /* Add some hover effect */ .youtube-square-button:hover { background-color: #32508e; /* Darker shade on hover */ } .container { margin: 0 auto; width: 600px; padding: 20px; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.12), 0 2px 4px 0 rgba(0, 0, 0, 0.24); } </style> </body> </html>