Stap 6: Sociale Mediaknoppen toevoegen
We willen enkele sociale Mediaknoppen toevoegen zodat zij ook contact met u via sociale media opnemen kunnen. Er zijn twee stijlen die u uit (Zie de foto's kiezen kunt). Ik heb GIF's toegevoegd, zodat u kunt zien hoe ze van elkaar verschillen. Hang uw muis over om te zien welke stijl is. Ik de eerste stijl het leukst, maar de tweede is ook mooi.
Dus laat ze toevoegen. Voor beide versies hebt u dezelfde HTML-code toevoegen
Dus het toevoegen van deze code onder de input-tag met een type 'submit':
<link rel='stylesheet' href='http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css'>
'#' Wordt vervangen door uw eigen url.
Nu moeten we een ander css-bestand (een lettertype voor de social media iconen) doen wij dit door de volgende regel toe te voegen aan de hoofd-tag:
#social { margin: 20px 10px; text-align: center; } .smGlobalBtn { /* global button class */ display: inline-block; position: relative; cursor: pointer; width: 50px; height: 50px; border:2px solid #ddd; /* add border to the buttons */ box-shadow: 0 3px 3px #999; padding: 0px; text-decoration: none; text-align: center; color: #fff; font-size: 25px; font-weight: normal; line-height: 2em; border-radius: 27px; -moz-border-radius:27px; -webkit-border-radius:27px; } /* facebook button class*/ .facebookBtn{ background: #4060A5; } .facebookBtn:before{ /* use :before to add the relevant icons */ font-family: "FontAwesome"; content: "\f09a"; /* add facebook icon */ } .facebookBtn:hover{ color: #4060A5; background: #fff; border-color: #4060A5; /* change the border color on mouse hover */ } /* twitter button class*/ .twitterBtn{ background: #00ABE3; } .twitterBtn:before{ font-family: "FontAwesome"; content: "\f099"; /* add twitter icon */ } .twitterBtn:hover{ color: #00ABE3; background: #fff; border-color: #00ABE3; } /* google plus button class*/ .googleplusBtn{ background: #e64522; } .googleplusBtn:before{ font-family: "FontAwesome"; content: "\f0d5"; /* add googleplus icon */ } .googleplusBtn:hover{ color: #e64522; background: #fff; border-color: #e64522; } /* linkedin button class*/ .linkedinBtn{ background: #0094BC; } .linkedinBtn:before{ font-family: "FontAwesome"; content: "\f0e1"; /* add linkedin icon */ } .linkedinBtn:hover{ color: #0094BC; background: #fff; border-color: #0094BC; } /* pinterest button class*/ .pinterestBtn{ background: #cb2027; } .pinterestBtn:before{ font-family: "FontAwesome"; content: "\f0d2"; /* add pinterest icon */ } .pinterestBtn:hover{ color: #cb2027; background: #fff; border-color: #cb2027; } /* tumblr button class*/ .tumblrBtn{ background: #3a5876; } .tumblrBtn:before{ font-family: "FontAwesome"; content: "\f173"; /* add tumblr icon */ } .tumblrBtn:hover{ color: #3a5876; background: #fff; border-color: #3a5876; } /* rss button class*/ .rssBtn{ background: #e88845; } .rssBtn:before{ font-family: "FontAwesome"; content: "\f09e"; /* add rss icon */ } .rssBtn:hover{ color: #e88845; background: #fff; border-color: #e88845; }
In de tag style zullen wij moeten toevoegen de volgende code:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js">
Nu test uw website site en moet u ze net onder de input vormen. De ': hover' verschijnt nadat een container betekent dat wanneer u Beweeg je muis over het gebruik van die code container.