mc773

이렇게 적용했습니다~

<style type="text/css">
/* Google Web Font */
@import url('https://fonts.googleapis.com/css?family=Raleway&display=swap');

/* Fontawesome 4.7 */
@import url('https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css');

body {
&nbsp; font-family: 'Raleway', sans-serif;
&nbsp; line-height: 1.5em;
&nbsp; margin: 0;
&nbsp; font-weight: 300;
&nbsp; color: #222;
&nbsp; display: flex;
&nbsp; justify-content: center;
&nbsp; align-items: center;
&nbsp; height: 100vh;
&nbsp; flex-direction: column;
}
a {
&nbsp; text-decoration: none;
&nbsp; color: #222;
}
 
 
.sns {
 background-color: #eee;
 padding: 40px;
 border-radius: 10px;
 box-shadow: 0 0 20px rgba(0,0,0, 0.13);
 margin-top: 25px;
}

.sns a {
 border: 5px solid white;
 display: inline-block;&nbsp;
 width: 80px;
 height: 80px;
 border-radius: 50%;
 position: relative;
 background-color: #fff;
 margin: 10px;
 overflow: hidden;
}


&nbsp;.sns a:before {
 content :"";
 position: absolute;
 width : 100%;
 height: 100%;
 background-color: white;
 transition : 0.5s;
}&nbsp;
 
&nbsp;.sns a:hover:before {
 height: 0px;
} 
 
&nbsp;.sns a:nth-child(1) {
&nbsp; background-color: #3b5999;
&nbsp;}
&nbsp;.sns a:nth-child(2) {
&nbsp; background-color: #55acee;
&nbsp;}
&nbsp;.sns a:nth-child(3) {
&nbsp; background-color: #dd4b39;
&nbsp;}
&nbsp;.sns a:nth-child(4) {
&nbsp; background-color: #0077b5;
&nbsp;}
&nbsp; .sns a:nth-child(5) {
&nbsp; background: linear-gradient(#744999,#e22484,#e8442f,#f0c441);
&nbsp;}
&nbsp; 
.sns a .fa {
 position: relative;
 top : 50%;
 left : 50%;
 transform: translate(-50%,-50%);
 font-size: 33px;
 color: black;
 transition : 0.5s;
}

.sns a:hover .fa {
 color: white;
} 
&nbsp; 
</style>
</head>
<body>

<div class="sns">
 <a href="#"></a>
 <a href="#"></a>
 <a href="#"></a>
 <a href="#"></a>
 <a href="#"></a>
</div>

</body>

소개

게시글