×

Social Buttons, Step 2 [2/18]

As we are going to line up and size the buttons, we'll obviously need inline-blocks here.

We will also set the background and see the behavior of our buttons and label. To align the "Social Media" label and buttons in a beautiful way, let's align them vertically to the middle.

In this stage, we define the styles which are shared by the buttons, so we add them to the CSS rule of the social class.


Do it
HTML
<!DOCTYPE html> <html lang="ru"> <head> <meta charset="utf-8"> <title>Social Buttons, Step 2</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> <a class="social social-vk" href="http://vk.com/htmlacademy"></a> <a class="social social-fb" href="http://www.facebook.com/htmlacademy"></a> <a class="social social-tw" href="http://twitter.com/htmlacademy_ru"></a> </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; } .social { }
HTML Academy

For the .social class, set:

  1. Inline-block type
  2. Width and height of 40px
  3. Background color of #bdc3c7
  4. Right margin of 10px
  5. Vertical alignment to middle.
Theory Check Next