×

Social Buttons, Step 1 [1/18]

To begin the course, let's take a simple task to lay out social media buttons.

Typically, such buttons link to the company's pages in social media. Just to mention, styling of clickable "likes" is somewhat more of a challenge.

Let's start with the HTML markup. We are going to add three links and assign two classes to each of them. The first class should be shared by the buttons to set their shape and size. The second class should be unique and set the background and logo of each social media.


Do it
HTML
<!DOCTYPE html> <html lang="ru"> <head> <meta charset="utf-8"> <title>Social Buttons, Step 1</title> <link href="//fonts.googleapis.com/css?family=PT+Sans:400&subset=cyrillic" rel="stylesheet" type="text/css"> </head> <body> <div class="share"> <b>Social Media</b> </div> </body> </html>
CSS
body { margin: 0; padding: 0; font-family: "PT Sans", sans-serif; font-size: 14px; } .share { width: 270px; margin: 0 auto; margin-top: 120px; padding: 10px; padding-left: 20px; background-color: #ecf0f1; } .share b { margin-right: 15px; font-weight: normal; text-transform: uppercase; color: #7f8c8d; }
HTML Academy

Add 3 links into the .share block after the <b> tag:

  1. The first link with the social and social-vk classes,
  2. The second link with the social and social-fb classes,
  3. The third link with the social and social-tw classes.

Set any URLs you like for the links.

Theory Check Next