Kumpulan Widget Blogger Neumorphism

Kumpulan Widget Blogger Alert Box, Style Button, Icon social media dan Profil Card UI Neumorphism.

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

This is a secondary alert with an example link. Give it a click if you like.

<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>

This is a success alert with an example link. Give it a click if you like.

<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>

This is a info alert with an example link. Give it a click if you like.

<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>

This is a danger alert with an example link. Give it a click if you like.

<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

Warning! Better check yourself, you're not looking too good.

<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>

Well done! You successfully read this important alert message.

<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>

Heads up!This alert needs your attention, but it's not super important.

<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>

Oh snap! Change a few things up and try submitting again.

<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

Warning!

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>

Well done!

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>

Heads up!

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>

Danger!

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 dengan btn-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="&lt;a href=&quot;#&quot; class=&quot;yt&quot;&gt;">Message</a></button>
      <button><a href="&lt;a href=&quot;#&quot; class=&quot;yt&quot;&gt;">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

elzeno.id

Bisa Karena Biasa

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 UI

Demikian kami sajikan mengenai Kumpulan Widget Alert Box, Style Button, Icon Sosial dan Profil Card UI Neumorphism platform Blogger, semoga bermanfaat.

Source:
Techydarshan dan Wikipedia

Download

Posting Komentar

Cara Berkomentar bagi yang tidak memiliki blog:
1. Klik select profile --> pilih "Name/URL".
2. Isi nama Anda dan isi dengan alamat facebook Anda.
3. Klik "Lanjutkan".
4. Ketik komentar Anda.
5. Klik "Publish".
6. Centang "CAPTCHA" yang menyatakan bahwa Anda bukan robot.
7. Klik "Publish".

Blog Tutorial

Kumpulan Widget Blogger Neumorphism

Pengertian Neumorphism

Widget Alert Note Box Neumorphism

Kelebihan Note Block

Cara Membuat Neumorphism Alert Boxes

a. Script CSS Neumorphism

Font Awesome

Script HTML Neumorphism

1) Style 1 - Alert Box Neumorphism

2) Style 2 - Alert Box Neumorphism

3) Style 3 - Alert Box Neumorphism

Kustomisasi Neumorphism

Widget Tombol Button Soft UI Neumorphism

Kelebihan Tombol Button Soft UI

Cara Membuat Tombol Button Soft UI Neumorphism

Script CSS Button

Script HTML Button

Kustomisasi Button

Widget Profile Card Soft UI Neumorphism

Kelebihan Profile Card Soft UI / Neumorphism

cara membuat Profile Card Neumorphism

Tutorial Profile Card

Kustomisasi Profile Card

Demo Profile Card

Widget Icon Social Media Soft UI Neumorphism

Demo Icon

Kode Script Icon

Posting Komentar

Download Font Arab Standar Al-Quran dan Font Kitab dengan Bahasa Melayu

Download Font Aksara Jawa Hanacaraka Tanpa Instal Languages

Cara Setting Page Layout Buku Saku (A6) Ms. Word Serta Membuat Cover dengan Photoshop

Download Rumus Fungsi Terbilang Rupiah di Excel Indonesia

Instal Sony Vegas Pro 13 + Crack (Full Version)

elzeno.id