Pengertian Neumorphism
Neumorphism adalah gaya desain yang digunakan dalam antarmuka pengguna grafis. Hal ini biasanya diidentifikasi dengan tampilan yang lembut dan ringan, (yang kadang-kadang disebut juga sebagai Soft UI) dengan elemen yang tampak menonjol atau melekuk ke latar belakang seperti mengapung di atasnya.
Bersumber dari JustInMind, neumorphism adalah sebuah pendekatan baru dari desain skeuomorphism yang menggabungkan dengan konsep flat design.
Bisa dibilang, kata neumorphism berasal dari new dan skeuomorphism. Namun, berbeda dengan konsep skeuomorphism yang mengedepankan bentuk nyata dalam penerapan digital, neumorphism lebih berfokus pada kombinasi warna. Hal ini membuat tampilan antarmukanya seperti kamu sedang melihat kartu dengan tulisan timbul di dalamnya.
Tampilan desain neumorphism memerlukan penataan kontras, shadow, dan komponen yang tepat agar tetap enak dipandang.
Tak hanya itu, konsep ini juga membuat tampilan di layar smartphone-mu lebih hidup, dan terjadi interaksi langsung di dalamnya. Seakan-akan kamu menekan tombol asli, bukan animasi dalam smartphone.
Widget Alert Note Box Neumorphism
Note Block atau Note Box adalah fitur yang hadir secara default di beberapa template blogger seperti iMagz, Median Ui, Fletro pro dll. Note Block digunakan untuk menyoroti informasi penting, kalimat peringatan atau sorotan tahapan penting apa saja agar pengguna dapat membacanya dengan lebih mudah dan efisien.
Kelebihan Note Block
- Bisa ditambahkan di template Blogger
- Desain Neumorphism
- Tampilan unik, menarik dan dinamis
- Meningkatkan tampilan situs
- Dapat digunakan untuk menyorot Info Penting, kalimat peringatan atau langkah penting lainnya.
- Pengguna bisa lebih tertarik dan bisa membaca lebih efisien daripada teks biasa.
Cara Membuat Neumorphism Alert Boxes
Cara membuat Neumorphism Alert Boxes di Blogger, sebagai berikut.
a. Script CSS Neumorphism
- Pertama-tama Login ke Dashboard Blogger Anda.
- Pilih Tema.
- Klik icon panah ke bawah di sebelah tombol 'Sesuaikan'
- Klik Edit HTML, Anda akan diarahkan ke halaman pengeditan.
- Cari kode
]]></b:skin>
kemudian salin script CSS dibawah ini, kemudian tempelkan di atas kode tersebut. - Terakhir - Simpan.
/* Neumorphism Alert Boxes by elzeno */ .far,.fas{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:inline-block;font-style:normal;font-variant:normal;text-rendering:auto;line-height:1} .fa-bell:before{content:"\f0f3"} .fa-exclamation-circle:before{content:"\f06a"} .fa-fire:before{content:"\f06d"} .fa-thumbs-up:before{content:"\f164"} .far{font-weight:400} .far,.fas{font-family:"Font Awesome 5 Free"} .fas{font-weight:900} .container{width:100%;padding-right:15px;padding-left:15px;margin-right:auto;margin-left:auto} .alert{position:relative;padding:1rem 1.5rem;margin-bottom:1rem;border:0.0625rem solid transparent;border-radius:0.55rem} .alert-heading{color:inherit} .alert-link{font-weight:600} .alert-secondary{color:#2c46b0;background-color:#3c59cb;border-color:#2c49bc} .alert-secondary .alert-link{color:#223687} .alert-success{color:#1a5a47;background-color:#296e58;border-color:#195e49} .alert-success .alert-link{color:#0f3228} .alert-info{color:#064f9f;background-color:#1362b8;border-color:#0352a9} .alert-info .alert-link{color:#04376e} .alert-danger{color:#94202d;background-color:#ae2f3c;border-color:#9f1f2d} .alert-danger .alert-link{color:#6a1720} .bg-primary{background-color:#e6e7ee!important} [class*="shadow"]{transition:all 0.2s ease} .shadow-soft{box-shadow:6px 6px 12px #b8b9be,-6px -6px 12px #fff!important} .alert{padding:1rem 1.5rem;border:#44476a;font-size:0.875rem;border:0.0625rem solid #d1d9e6} .alert .alert-inner--icon{font-size:1.25rem;margin-right:0.375rem} .alert .alert-inner--text{display:inline-block} .alert .alert-inner--text a{font-weight:600} .alert-heading{font-weight:600;font-size:1.5rem} .alert-secondary{background:#e6e7ee;color:#2d4cc8} .alert-success{background:#e6e7ee;color:#18634b} .alert-info{background:#e6e7ee;color:#0056b3} .alert-danger{background:#e6e7ee;color:#a91e2c}
Font Awesome
Kemudian salin kode script di bawah, dan tempelkan di <head>
<link crossorigin="anonymous" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css" integrity="sha384-DyZ88mC6Up2uqS4h/KRgHuoeGwBcD4Ng9SiP4dIRy0EXTlnuz47vAwmeGwVChigm" rel="stylesheet"><link/>
Script HTML Neumorphism
Terakhir, salin kode script HTML di bawah ini, dan letakkan sesuai dengan yang anda inginkan.
1) Style 1 - Alert Box Neumorphism
<div class="alert alert-secondary shadow-soft" role="alert"><span class="alert-inner--text">This is a secondary alert with <a class="alert-link" href="#">an example link</a>. Give it a click if you like.</span></div>
<div class="alert alert-success shadow-soft" role="alert"><span class="alert-inner--text">This is a success alert with <a class="alert-link" href="#">an example link</a>. Give it a click if you like.</span></div>
<div class="alert alert-info shadow-soft" role="alert"><span class="alert-inner--text">This is a info alert with <a class="alert-link" href="#">an example link</a>. Give it a click if you like.</span></div>
<div class="alert alert-danger shadow-soft" role="alert"><span class="alert-inner--text">This is a danger alert with <a class="alert-link" href="#">an example link</a>. Give it a click if you like.</span></div>
2) Style 2 - Alert Box Neumorphism
<div class="alert alert-secondary shadow-soft fade show" role="alert"><span class="alert-inner--icon"><span class="fas fa-exclamation-circle"></span></span> <span class="alert-inner--text"><strong>Warning!</strong> Better check yourself, you're not looking too good.</span></div>
<div class="alert alert-success shadow-soft fade show" role="alert"><span class="alert-inner--icon"><span class="far fa-thu s-up"></span></span> <span class="alert-inner--text"><strong>Well done!</strong> You successfully read this important alert message.</span> </div>
<div class="alert alert-info shadow-soft fade show" role="alert"><span class="alert-inner--icon"><span class="far fa-bell"></span></span> <span class="alert-inner--text"><strong>Heads up!</strong>This alert needs your attention, but it's not super important.</span> </div>
<div class="alert alert-danger shadow-soft fade show" role="alert"><span class="alert-inner--icon"><span class="fas fa-fire"></span></span> <span class="alert-inner--text"><strong>Oh snap!</strong> Change a few things up and try submitting again.</span> </div>
3) Style 3 - Alert Box Neumorphism
Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.
Whenever you need to, be sure to use margin utilities to keep things nice and tidy.
<div class="alert alert-secondary shadow-soft" role="alert"><span class="alert-inner--icon icon-lg"><span class="fas fa-exclamation-circle"></span></span> <span class="alert-heading">Warning!</span> <p>Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.</p><p /> <p>Whenever you need to, be sure to use margin utilities to keep things nice and tidy.</p></div>
Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.
Whenever you need to, be sure to use margin utilities to keep things nice and tidy.
<div class="alert alert-success shadow-soft" role="alert"><span class="alert-inner--icon icon-lg"><span class="far fa-thumbs-up"></span></span> <span class="alert-heading">Well done!</span> <p>Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.</p><p /> <p>Whenever you need to, be sure to use margin utilities to keep things nice and tidy.</p></div>
Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.
Whenever you need to, be sure to use margin utilities to keep things nice and tidy.
<div class="alert alert-info shadow-soft" role="alert"><span class="alert-inner--icon icon-lg"><span class="far fa-bell"></span></span> <span class="alert-heading">Heads up!</span> <p>Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.</p><p /> <p>Whenever you need to, be sure to use margin utilities to keep things nice and tidy.</p></div>
Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.
Whenever you need to, be sure to use margin utilities to keep things nice and tidy.
<div class="alert alert-danger shadow-soft" role="alert"><span class="alert-inner--icon icon-lg"><span class="fas fa-fire"></span></span> <span class="alert-heading">Danger!</span> <p>Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.</p><p /> <p>Whenever you need to, be sure to use margin utilities to keep things nice and tidy.</p></div>
Kustomisasi Neumorphism
- Ganti # in Style 1 dengan url-link anda.
- Ganti teks antara "p tags" (
<p> .......... </p>
), dengan teks yang anda inginkan. - Ganti icon Font Awesome dengan icon yang anda sukai.
Widget Tombol Button Soft UI Neumorphism
Tombol Button Soft UI pada dasarnya menghilangkan sudut tajam antarmuka dan menjadikan sudut lembut untuk penampilan yang halus dan desain ikonik.
Kelebihan Tombol Button Soft UI
- Bersih dioptimalkan terlihat.
- Penampilan lembut secara keseluruhan.
- Desain UI yang lembut.
- Ubah tombol lama Anda ke gaya baru ini.
- Menambahkan nuansa tombol 3 Dimensi.
Cara Membuat Tombol Button Soft UI Neumorphism
Cara membuat Tombol Button Soft UI / Neumorphism di Blogger, sebagai berikut.
Script CSS Button
- Pertama-tama Login ke Dashboard Blogger Anda.
- Pilih Tema.
- Klik icon panah ke bawah di sebelah tombol 'Sesuaikan'
- Klik Edit HTML, Anda akan diarahkan ke halaman pengeditan.
- Cari kode
]]></b:skin>
kemudian salin script CSS dibawah ini, kemudian tempelkan di atas kode tersebut. - Terakhir, Simpan.
button{margin:20px} .custom-btn{width:130px;height:40px;color:#fff;border-radius:50px;padding:10px 25px;font-family:'Lato',sans-serif;font-weight:500;font-size:16px;background:transparent;cursor:pointer;transition:all 0.3s ease;position:relative;display:inline-block;box-shadow:inset 2px 2px 2px 0 rgba(255,255,255,.5),inset -7px -7px 10px 0 rgba(0,0,0,.1),7px 7px 20px 0 rgba(0,0,0,.1),4px 4px 5px 0 rgba(0,0,0,.1);text-shadow:2px 2px 3px rgba(255,255,255,.5),-4px -4px 6px rgba(116,125,136,.2);outline:none} /* 1 */ .btn-1{color:rgba(0,3,255,.5);background-color:#b2d8ff;border:none} .btn-1:hover{color:rgba(0,3,255,.7);background:linear-gradient(0deg,rgba(0,3,255,.5) 0%,rgba(2,126,251,.5) 100%)} /* 2 */ .btn-2{background-color:#e8d1ff;color:rgba(96,9,240,.5);border:none} .btn-2:before{height:0%;width:2px} .btn-2:hover{box-shadow:4px 4px 6px 0 rgba(255,255,255,.5),-4px -4px 6px 0 rgba(116,125,136,.5),inset -4px -4px 6px 0 rgba(255,255,255,.2),inset 4px 4px 6px 0 rgba(0,0,0,.2)} /* 3 */ .btn-3{color:rgba(2,126,251,1);background:rgba(118,174,241,1);width:130px;height:40px;line-height:42px;padding:0;border:none} .btn-3 span{position:relative;display:block;width:100%;height:100%} .btn-3:before,.btn-3:after{position:absolute;content:"";right:0;top:0;background:rgba(2,126,251,1);transition:all 0.3s ease} .btn-3:before{height:0%;width:2px} .btn-3:after{width:0%;height:2px}let's .btn-3:hover{background:transparent;box-shadow:none} .btn-3:hover:before{height:100%} .btn-3:hover:after{width:100%} .btn-3 span:hover{color:rgba(2,126,251,1)} .btn-3 span:before,.btn-3 span:after{position:absolute;content:"";left:0;bottom:0;background:rgba(2,126,251,1);transition:all 0.3s ease} .btn-3 span:before{width:2px;height:0%} .btn-3 span:after{width:0%;height:2px} .btn-3 span:hover:before{height:100%} .btn-3 span:hover:after{width:100%} /* 4 */ .btn-4{color:#03c8a8;background:#96e4df;line-height:42px;padding:0;border:none} .btn-4:hover{background-color:#89d8d3} /* 5 */ .btn-5{border:none;color:#ff84c1;background-color:#ffc1e0} .btn-5:hover{color:#f0094a;background:transparent;box-shadow:none} .btn-5:before,.btn-5:after{content:'';position:absolute;top:0;right:0;height:2px;width:0;background:#f0094a;box-shadow:-1px -1px 5px 0 #fff,7px 7px 20px 0 #0003,4px 4px 5px 0 #0002;transition:400ms ease all} .btn-5:after{right:inherit;top:inherit;left:0;bottom:0} .btn-5:hover:before,.btn-5:hover:after{width:100%;transition:800ms ease all} /* 6 */ .btn-6{color:rgba(234,76,137,1);background:rgb(247,150,192);line-height:42px;padding:0;border:none} .btn-6 span{position:relative;display:block;width:100%;height:100%} .btn-6:before,.btn-6:after{position:absolute;content:"";height:0%;width:1px;box-shadow:-1px -1px 20px 0 rgba(255,255,255,1),-4px -4px 5px 0 rgba(255,255,255,1),7px 7px 20px 0 rgba(0,0,0,.4),4px 4px 5px 0 rgba(0,0,0,.3)} .btn-6:before{right:0;top:0;transition:all 500ms ease} .btn-6:after{left:0;bottom:0;transition:all 500ms ease} .btn-6:hover{background:transparent;color:#76aef1;box-shadow:none} .btn-6:hover:before{transition:all 500ms ease;height:100%} .btn-6:hover:after{transition:all 500ms ease;height:100%} .btn-6 span:before,.btn-6 span:after{position:absolute;content:"";box-shadow:-1px -1px 20px 0 rgba(255,255,255,1),-4px -4px 5px 0 rgba(255,255,255,1),7px 7px 20px 0 rgba(0,0,0,.4),4px 4px 5px 0 rgba(0,0,0,.3)} .btn-6 span:before{left:0;top:0;width:0%;height:.5px;transition:all 500ms ease} .btn-6 span:after{right:0;bottom:0;width:0%;height:.5px;transition:all 500ms ease} .btn-6 span:hover:before{width:100%} .btn-6 span:hover:after{width:100%} /* 7 */ .btn-7{background:#ffbf7f;line-height:42px;color:darkorange;padding:0;border:none} .btn-7 span{position:relative;display:block;width:100%;height:100%} .btn-7:before,.btn-7:after{position:absolute;content:"";right:0;bottom:0;background:rgba(251,75,2,1);box-shadow:-7px -7px 20px 0 rgba(255,255,255,.9),-4px -4px 5px 0 rgba(255,255,255,.9),7px 7px 20px 0 rgba(0,0,0,.2),4px 4px 5px 0 rgba(0,0,0,.3);transition:all 0.3s ease} .btn-7:before{height:0%;width:2px} .btn-7:after{width:0%;height:2px} .btn-7:hover{color:rgba(251,75,2,1);background:transparent} .btn-7:hover:before{height:100%} .btn-7:hover:after{width:100%} .btn-7 span:before,.btn-7 span:after{position:absolute;content:"";left:0;top:0;background:rgba(251,75,2,1);box-shadow:-7px -7px 20px 0 rgba(255,255,255,.9),-4px -4px 5px 0 rgba(255,255,255,.9),7px 7px 20px 0 rgba(0,0,0,.2),4px 4px 5px 0 rgba(0,0,0,.3);transition:all 0.3s ease} .btn-7 span:before{width:2px;height:0%} .btn-7 span:after{height:2px;width:0%} .btn-7 span:hover:before{height:100%} .btn-7 span:hover:after{width:100%} /* 8 */ .btn-8{background-color:#d9d0f5;color:#c797eb;line-height:42px;padding:0;border:none} .btn-8 span{position:relative;display:block;width:100%;height:100%} .btn-8:before,.btn-8:after{position:absolute;content:"";right:0;bottom:0;background:#c797eb;transition:all 0.3s ease} .btn-8:before{height:0%;width:2px} .btn-8:after{width:0%;height:2px} .btn-8:hover:before{height:100%} .btn-8:hover:after{width:100%} .btn-8:hover{background:transparent} .btn-8 span:hover{color:#c797eb} .btn-8 span:before,.btn-8 span:after{position:absolute;content:"";left:0;top:0;background:#c797eb;transition:all 0.3s ease} .btn-8 span:before{width:2px;height:0%} .btn-8 span:after{height:2px;width:0%} .btn-8 span:hover:before{height:100%} .btn-8 span:hover:after{width:100%} /* 9 */ .btn-9{border:none;transition:all 0.3s ease;overflow:hidden;color:#1fd1f9;color:#0cbcff} .btn-9:after{position:absolute;content:" ";z-index:-1;top:0;left:0;width:100%;height:100%;background:#5fe0fd;transition:all 0.3s ease} .btn-9:hover{background:transparent;box-shadow:4px 4px 6px 0 rgba(255,255,255,.5),-4px -4px 6px 0 rgba(116,125,136,.2),inset -4px -4px 6px 0 rgba(255,255,255,.5),inset 4px 4px 6px 0 rgba(116,125,136,.3);color:#fff} .btn-9:hover:after{-webkit-transform:scale(2) rotate(180deg);transform:scale(2) rotate(180deg);box-shadow:4px 4px 6px 0 rgba(255,255,255,.5),-4px -4px 6px 0 rgba(116,125,136,.2),inset -4px -4px 6px 0 rgba(255,255,255,.5),inset 4px 4px 6px 0 rgba(116,125,136,.3)} /* 10 */ .btn-10{background:lightblue;color:#60abf7;border:none;transition:all 0.3s ease;overflow:hidden} .btn-10:after{position:absolute;content:" ";top:0;left:0;z-index:-1;width:100%;height:100%;transition:all 0.3s ease;-webkit-transform:scale(.1);transform:scale(.1)} .btn-10:hover{color:#fff;border:none;background:transparent} .btn-10:hover:after{background:#7fbfff;-webkit-transform:scale(1);transform:scale(1)} /* 11 */ .btn-11{border:none;background:rgb(251,33,117);background:linear-gradient(0deg,rgba(251,33,117,1) 0%,rgba(234,76,137,1) 100%);background:#f7d0f5;color:rgba(251,33,117,.5);overflow:hidden} .btn-11:hover{text-decoration:none;color:#fff} .btn-11:before{position:absolute;content:'';display:inline-block;top:-180px;left:0;width:30px;height:100%;background-color:#fff;animation:shiny-btn1 3s ease-in-out infinite} .btn-11:hover{opacity:.7} .btn-11:active{box-shadow:4px 4px 6px 0 rgba(255,255,255,.3),-4px -4px 6px 0 rgba(116,125,136,.2),inset -4px -4px 6px 0 rgba(255,255,255,.2),inset 4px 4px 6px 0 rgba(0,0,0,.2)} @-webkit-keyframes shiny-btn1{0%{-webkit-transform:scale(0) rotate(45deg);opacity:0}80%{-webkit-transform:scale(0) rotate(45deg);opacity:0.5}81%{-webkit-transform:scale(4) rotate(45deg);opacity:1}100%{-webkit-transform:scale(50) rotate(45deg);opacity:0}} /* 12 */ .btn-12{position:relative;right:20px;bottom:20px;border:none;box-shadow:none;width:130px;height:40px;line-height:42px;-webkit-perspective:230px;perspective:230px} .btn-12 span{background:#7fbfff;color:#3b97f3;display:block;position:absolute;width:130px;height:40px;box-shadow:inset 2px 2px 2px 0 rgba(255,255,255,.5),7px 7px 20px 0 rgba(0,0,0,.1),4px 4px 5px 0 rgba(0,0,0,.1);border-radius:50px;margin:0;text-align:center;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;-webkit-transition:all .3s;transition:all .3s} .btn-12 span:nth-child(1){box-shadow:-7px -7px 20px 0 #fff9,-4px -4px 5px 0 #fff9,7px 7px 20px 0 #0002,4px 4px 5px 0 #0001;-webkit-transform:rotateX(90deg);-moz-transform:rotateX(90deg);transform:rotateX(90deg);-webkit-transform-origin:50% 50% -20px;-moz-transform-origin:50% 50% -20px;transform-origin:50% 50% -20px} .btn-12 span:nth-child(2){-webkit-transform:rotateX(0deg);-moz-transform:rotateX(0deg);transform:rotateX(0deg);-webkit-transform-origin:50% 50% -20px;-moz-transform-origin:50% 50% -20px;transform-origin:50% 50% -20px} .btn-12:hover span:nth-child(1){box-shadow:inset 2px 2px 2px 0 rgba(255,255,255,.5),7px 7px 20px 0 rgba(0,0,0,.1),4px 4px 5px 0 rgba(0,0,0,.1);-webkit-transform:rotateX(0deg);-moz-transform:rotateX(0deg);transform:rotateX(0deg)} .btn-12:hover span:nth-child(2){background:transparent;color:transparent;box-shadow:none;text-shadow:none;-webkit-transform:rotateX(-90deg);-moz-transform:rotateX(-90deg);transform:rotateX(-90deg)} /* 13 */ .btn-13{color:lightseagreen;background-color:#89d8d3;border:none;z-index:1} .btn-13:after{position:absolute;content:"";width:100%;height:0;bottom:0;left:0;z-index:-1;border-radius:50px;background-color:#4dccc6;background-image:linear-gradient(315deg,#4dccc6 0%,#96e4df 74%);box-shadow:inset 2px 2px 2px 0 rgba(255,255,255,.5),inset -7px -7px 10px 0 rgba(0,0,0,.1),7px 7px 20px 0 rgba(0,0,0,.1),4px 4px 5px 0 rgba(0,0,0,.1);text-shadow:0 0 6px rgba(255,255,255,.3),-4px -4px 6px rgba(116,125,136,.2);transition:all 0.3s ease} .btn-13:hover{} .btn-13:hover:after{top:0;height:100%} .btn-13:active{top:2px} /* 14 */ .btn-14{background:#ffff9e;color:#ffb64d;border:none;z-index:1} .btn-14:after{position:absolute;content:"";width:100%;height:0;top:0;left:0;z-index:-1;border-radius:50px;background-color:#ffff8a;box-shadow:inset 2px 2px 2px 0 rgba(255,255,255,.5),inset -7px -7px 10px 0 rgba(0,0,0,.1),7px 7px 20px 0 rgba(0,0,0,.1),4px 4px 5px 0 rgba(0,0,0,.1);text-shadow:0 0 6px rgba(255,255,255,.3),-4px -4px 6px rgba(116,125,136,.2);transition:all 0.3s ease} .btn-14:hover{color:#ffb64d} .btn-14:hover:after{top:auto;bottom:0;height:100%} .btn-14:active{top:2px} /* 15 */ .btn-15{background:#c68eff;color:#a453f5;border:none;z-index:1} .btn-15:after{position:absolute;content:"";width:0;height:100%;top:0;right:0;z-index:-1;background-color:#7f7fff;border-radius:50px;box-shadow:inset 2px 2px 2px 0 rgba(255,255,255,.5),7px 7px 20px 0 rgba(0,0,0,.1),4px 4px 5px 0 rgba(0,0,0,.1);transition:all 0.3s ease} .btn-15:hover{color:#4c4cf1} .btn-15:hover:after{left:0;width:100%} .btn-15:active{top:2px} /* 16 */ .btn-16{border:none;color:#aaa} .btn-16:after{position:absolute;content:"";width:0;height:100%;top:0;left:0;direction:rtl;z-index:-1;border-radius:50px;box-shadow:-7px -7px 20px 0 #fff9,-4px -4px 5px 0 #fff9,7px 7px 20px 0 #0002,4px 4px 5px 0 #0001;transition:all 0.3s ease} .btn-16:hover{color:#bbb} .btn-16:hover:after{left:auto;right:0;width:100%} .btn-16:active{top:2px}
Script HTML Button
Terakhir, salin kode script HTML di bawah ini, dan letakkan sesuai dengan yang anda inginkan.
<button class="custom-btn btn-1" onclick="window.open('#')">Read More</button>
Kustomisasi Button
Keterangan :
- Untuk merubah tombol style, ganti
btn-1
denganbtn-2
....btn-16
- Ganti tanda
#
dengan URL link anda.
Widget Profile Card Soft UI Neumorphism
Profil Card Soft UI Neumorphism adalah kartu profil dengan efek neomorphic. Kartu ini berisi gambar profil, tombol media sosial, dan beberapa info media sosial. Saat Anda mengarahkan kursor ke tombol media sosial tertentu, akan ditampilkan efek neomorfik.
Kelebihan Profile Card Soft UI / Neumorphism
- Tampilan Profil Baru.
- Penampilan lembut halus secara keseluruhan.
- Desain UI yang lembut.
- Responsif.
cara membuat Profile Card Neumorphism
Cara membuat Profile Card Soft UI / Neumorphism, tahapannya sebagai berikut.
Tutorial Profile Card
Buat halaman postingan baru atau edit halaman yang sudah ada, kemudian ikuti langkah-langkah pembuatannya sebagai berikut.
- Dalam tampilan editor pos, klik ikon di kiri bawah nama judul.
- Dua opsi akan muncul: 'Tampilan HTML' dan 'Tampilan menulis'
- Pilih' Tampilan HTML '.
- Salin dan tempelkan kode script di bawah ini.
- Pratinjau dan terakhir Publikasikan.
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css" integrity="sha384-DyZ88mC6Up2uqS4h/KRgHuoeGwBcD4Ng9SiP4dIRy0EXTlnuz47vAwmeGwVChigm" crossorigin="anonymous"> <div class="wrapper"> <div class="img-area"> <div class="inner-area"> <img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbqEtuue8m4dEBwfg_qMlMnwxHGOW9wVgOvsyBhZYN0RMy_DfYxB2-Wn_i8H1cY6L1ZTG1jr2-o1wbYQWqr2QaGOuipZxwCXGBVWbrTGYiNO039x7u3y_0-m2-CW8zoFa08YvYXM2rd5g/h120/Techy+DarshaN+%25281%2529.png" /> </div> </div> <div class="icon arrow"><i class="fas fa-arrow-left"></i></div> <div class="icon dots"><i class="fas fa-ellipsis-v"></i></div> <div class="name">Nama</div> <div class="about">About</div> <div class="social-icons"> <a class="fb" href="https://www.facebook.com/"><i class="fab fa-facebook"></i></a> <a class="twitter" href="https://twitter.com/"><i class="fab fa-twitter"></i></a> <a class="insta" href="https://www.instagram.com/"><i class="fab fa-instagram"></i></a> <a class="yt" href="https://www.youtube.com"><i class="fab fa-youtube-square"></i></a> </div> <div class="buttons"> <button><a href="<a href="#" class="yt">">Message</a></button> <button><a href="<a href="#" class="yt">">Subscribe</a></button> </div> <div class="social-share"> <div class="row"> <i class="far fa-heart"></i> <i class="icon-2 fas fa-heart"></i> <span>20.4k</span> </div> <div class="row"> <i class="far fa-comment"></i> <i class="icon-2 fas fa-comment"></i> <span>14.3k</span> </div> <div class="row"> <i class="fas fa-share"></i> <span>12.8k</span> </div> </div> </div> <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}.wrapper,.wrapper .img-area,.social-icons a,.buttons button{background:#ffffff;box-shadow:-3px -3px 7px #ffffff,3px 3px 5px #ceced1}.wrapper{position:relative;width:350px;padding:30px;border-radius:10px;display:flex;align-items:center;justify-content:center;flex-direction:column}.wrapper .icon{font-size:17px;color:#31344b;position:absolute;cursor:pointer;opacity:0.7;top:15px;height:35px;width:35px;text-align:center;line-height:35px;border-radius:50%;font-size:16px}.wrapper .icon i{position:relative;z-index:9}.wrapper .icon.arrow{left:15px}.wrapper .icon.dots{right:15px}.wrapper .img-area{height:150px;width:150px;border-radius:50%;display:flex;align-items:center;justify-content:center}.img-area .inner-area{height:calc(100% - 25px);width:calc(100% - 25px);border-radius:50%}.inner-area img{height:100%;width:100%;border-radius:50%;object-fit:cover}.wrapper .name{font-size:23px;font-weight:500;color:#31344b;margin:10px 0 5px 0}.wrapper .about{color:#44476a;font-weight:400;font-size:16px}.wrapper .social-icons{margin:15px 0 25px 0}.social-icons a{position:relative;height:40px;width:40px;margin:0 5px;display:inline-flex;text-decoration:none;border-radius:50%}.social-icons a:hover::before,.wrapper .icon:hover::before,.buttons button:hover:before{content:"";position:absolute;top:0;left:0;bottom:0;right:0;border-radius:50%;background:#ffffff;box-shadow:inset -3px -3px 7px #ffffff,inset 3px 3px 5px #ceced1}.buttons button:hover:before{z-index:-1;border-radius:5px}.social-icons a i{position:relative;z-index:3;text-align:center;width:100%;height:100%;line-height:40px}.social-icons a.fb i{color:#4267B2}.social-icons a.twitter i{color:#1DA1F2}.social-icons a.insta i{color:#E1306C}.social-icons a.yt i{color:#ff0000}.wrapper .buttons{display:flex;width:100%;justify-content:space-between}.buttons button{position:relative;width:100%;border:none;outline:none;padding:12px 0;color:#31344b;font-size:17px;font-weight:400;border-radius:5px;cursor:pointer;z-index:4}.buttons button:first-child{margin-right:10px}.buttons button:last-child{margin-left:10px}.wrapper .social-share{display:flex;width:100%;margin-top:30px;padding:0 5px;justify-content:space-between}.social-share .row{color:#31344b;font-size:17px;cursor:pointer;position:relative}.social-share .row::before{position:absolute;content:"";height:100%;width:2px;background:#e0e6eb;margin-left:-25px}.row:first-child::before{background:none}.social-share .row i.icon-2{position:absolute;left:0;top:50%;color:#31344b;transform:translateY(-50%);opacity:0;pointer-events:none;transition:all 0.3s ease}.row:nth-child(1):hover i.fa-heart,.row:nth-child(2):hover i.fa-comment{opacity:1;pointer-events:auto} </style>
Kustomisasi Profile Card
Keterangan :
- Ganti teks nama, about dengan teks yang anda inginkan.
- Ganti tanda
#
dengan URL link anda.
Demo Profile Card
Tampilan demo Profile Card Soft UI Neumorphism
Widget Icon Social Media Soft UI Neumorphism
Icon Social Media Soft UI Neumorphism adalah icon tombol media sosial (Facebook, Twitter, Instagram, Youtube, dan beberapa icon media sosial) dengan efek neomorphic. Saat Anda mengarahkan kursor ke tombol media sosial tertentu, akan ditampilkan efek neomorfik.
Demo Icon
Kode Script Icon
Kode script HTML dan CSS Icon Social Media Soft UI / Neumorphism, sebagai berikut.
Icon Social Soft UIDemikian kami sajikan mengenai Kumpulan Widget Alert Box, Style Button, Icon Sosial dan Profil Card UI Neumorphism platform Blogger, semoga bermanfaat.
Source:
Techydarshan dan Wikipedia