|
| Icon Social Media Efek Neumorphism Blogger |
Icon Social Media Neumorphism
Icon Social Media Efek Neumorphism adalah tombol icon modern media sosial dengan efek Neumorphism yaitu hanya menggunakan kode HTML dan CSS. Dengan efek Neumorphism membuat elemen apa pun lebih indah , jelas dan dapat mencerahkan elemen apa pun dengan bantuan warna seperti yang Anda lihat pada gambar di atas.
Ada lima ikon sosial di menu media sosial yang dibuat untuk artikel ini yang dirancang dengan kode CSS lengkap. Anda dapat dengan mudah mengubah ikon di media sosial di sini. Beberapa efek hover khusus telah ditambahkan ke dalamnya. Akibatnya, saat Anda mengklik tombol, tombol tersebut akan bergerak sedikit ke dalam. Hasilnya, tombol-tombol ini tampak lebih orisinal.
Tutorial
Bagaimana cara membuat icon social Neumorphism? Cara membuat Icon Social Media Efek Neumorphism di blog, ikuti langkah-langkahnya sebagai berikut.
Kode Script Icon Social Neumorphism
- Pertama masuk ke Dashboard Blogger.
- Kemudian buat halaman postingan.
- Dalam tampilan editor pos, klik ikon di kiri bawah nama judul.
- Dua opsi akan muncul: 'Tampilan HTML' dan 'Tampilan menulis'.
- Pilih' Tampilan HTML. '.
- Salin widget script di bawah ini, kemudian tempelkan di halaman postingan blog.
- Terakhir Pratinjau dan Publikasikan.
<!----Icon Social Media Efek Neumorphism--->
<div class="icons">
<a class="fb" href="#"><i class="fab fa-facebook-f"></i></a>
<a class="twitter" href="#"><i class="fab fa-twitter"></i></a>
<a class="insta" href="#"><i class="fab fa-instagram"></i></a>
<a class="git" href="#"><i class="fab fa-github"></i></a>
<a class="yt" href="#"><i class="fab fa-youtube"></i></a>
</div>
<link href="style.css" rel="stylesheet"></link>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css" rel="stylesheet"></link>
<style>
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap'); *{ margin: 0;padding: 0; box-sizing: border-box; font-family: 'Poppins', sans-serif; }.icons a{background: #fff; position: relative; height: 60px; width: 60px; margin: 0 10px; display: inline-flex;text-decoration: none;border-radius: 50%;transition: all 0.3s;box-shadow: -3px -3px 7px #ffffff, 3px 3px 5px #ceced1; }.icons a:hover:before{ content: "";position: absolute;top:0;left:0;bottom: 0;right: 0; border-radius: 50%;background: #ecf0f3;box-shadow: inset -3px -3px 7px #ffffff,inset 3px 3px 5px #ceced1; }.icons a i{position: relative; z-index: 3;text-align: center; width: 100%;height: 100%;font-size: 25px;line-height: 60px;}.icons a:hover i{transform: scale(0.9);}.icons a.fb i{ color: #4267B2;}.icons a.twitter i{color: #1DA1F2; } .icons a.insta i{color: #E1306C; }.icons a.git i{color: #333;} .icons a.yt i{color: #ff0000;}
</style>
Demo
Contoh demo tampilan icon social media dengak efek Neumorphism di blog.
Demikian Cara membuat Icon Social Media Efek Neumorphism di blog, semoga bermanfaat.