Inspirasi Button Dengan CSS

Hari ini kami ingin berbagi beberapa gaya dan efek tombol segar dengan Anda. "Tren tombol" saat ini cukup mengasyikkan karena ada berbagai detail desain yang memungkinkan keragaman gaya. Ada banyak garis tipis tapi juga tipografi tebal dan sebaliknya. Tombol transparan dengan batas agak bulat tampaknya cukup populer di situs dengan latar belakang gambar. Tapi tidak ada batasan untuk kebulatan, semuanya berjalan akhir-akhir ini, yang sangat bagus untuk membuat tombol pas untuk desain apapun. Apa yang mereka semua memiliki kesamaan adalah kesederhanaan dan efek kehalusan. Kami mencoba membuat set yang seimbang di mana kami tidak terlalu banyak bernyawa tapi mencoba menambahkan efek masuk akal yang sesuai dengan warna dan bentuk. Beberapa gaya sedikit lebih berani - mereka mungkin sesuai dengan beberapa desain khusus.
Untuk menjaga hal-hal yang dapat diatasi, kami telah memilih untuk memicu efek pada hover. Beberapa efek mungkin lebih sesuai klik, terserah Anda dan bagaimana Anda ingin menggunakan gagasan itu.
Kami menggunakan transisi CSS dalam banyak kasus namun kami juga memiliki beberapa contoh dengan animasi CSS.
Kali ini, kita telah menggunakan semacam pendekatan modular, di mana kita menetapkan beberapa properti seperti border-radius, font-size, border, etc. di kelas terpisah sehingga menciptakan gaya tombol tertentu menjadi lebih sederhana. Jika Anda ingin menggunakan satu gaya, kami akan merekomendasikan penggabungan gaya menjadi satu rangkaian deklarasi kelas.

Markup

<button class="button button--ujarak">Vote</button>

Gaya tombol yang umum adalah sebagai berikut:

/* Common button styles */
.button {
 float: left;
 min-width: 150px;
 max-width: 250px;
 display: block;
 margin: 1em;
 padding: 1em 2em;
 border: none;
 background: none;
 color: inherit;
 vertical-align: middle;
 position: relative;
 z-index: 1;
}

.button:focus {
 outline: none;
}

.button > span {
 vertical-align: middle;
}

Dalam beberapa kasus, kami akan memiliki markup tambahan seperti rentang atau beberapa bentang di dalam tombol. Gaya dan efeknya mungkin juga menarik untuk tautan; dalam hal ini Anda harus mengganti HTML dengan anchor dan menyesuaikan gaya yang sesuai.
Kelas berikut tersedia untuk mengendalikan gaya seperti batas, ukuran dan radius batas:

/* Sizes */
.button--size-s {
 font-size: 14px;
}

.button--size-m {
 font-size: 16px;
}

.button--size-l {
 font-size: 18px;
}

/* Typography and Roundedness */
.button--text-upper {
 letter-spacing: 2px;
 text-transform: uppercase;
}

.button--text-thin {
 font-weight: 300;
}

.button--text-medium {
 font-weight: 500;
}

.button--text-thick {
 font-weight: 600;
}

.button--round-s {
 border-radius: 5px;
}

.button--round-m {
 border-radius: 15px;
}

.button--round-l {
 border-radius: 40px;
}

/* Borders */
.button--border-thin {
 border: 1px solid;
}

.button--border-medium {
 border: 2px solid;
}

.button--border-thick {
 border: 3px solid;
}




Perhatikan bahwa tidak semua kelas masuk akal untuk semua tombol. Beberapa efek bergantung pada penggunaan elemen pseudo yang mungkin merupakan pembawa perbatasan, misalnya.
Gaya tombol individu memang menangani sebagian besar kasus.
Mari kita lihat "Itzel":

Efek ini menggunakan jalur klip untuk memotong bagian tepi elemen pseudo tombol. Ini hanya akan bekerja di browser yang mendukung properti yang tidak termasuk IE untuk saat ini. Untuk Firefox kita perlu menggunakan SVG dengan clipPath yang kita definisikan dalam HTML.
Untuk efeknya kita menyembunyikan elemen semu yang memiliki area terpotong di bagian bawah dengan mendorongnya ke bawah dengan sebuah transformasi. Kami akan menariknya kembali ke lebar perbatasan dengan menerapkan transformasi lain. Kita tidak bisa melihatnya di bawah karena tombol kita memiliki overflow yang tersembunyi. Ikon juga ditekan dengan cara yang sama. Saat kita melayang, kita membuat teksnya hilang dengan mengatur opacity menjadi 0 dan membiarkan ikon itu meluncur melalui "lubang".

/* Itzel */
.button--itzel {
 border: none;
 padding: 0px;
 overflow: hidden;
 width: 255px;
}

.button--itzel::before {
 content: '';
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 border: 2px solid;
 border-radius: inherit;
 -webkit-clip-path: polygon(0% 0%, 0% 100%, 35% 100%, 35% 60%, 65% 60%, 65% 100%, 100% 100%, 100% 0%);
 clip-path: url(../index.html#clipBox);
 transform: translate3d(0, 100%, 0) translate3d(0, -2px, 0);
 transform-origin: 50% 100%;
}

.button--itzel.button--border-thin::before {
 border: 1px solid;
 transform: translate3d(0, 100%, 0) translate3d(0, -1px, 0);
}

.button--itzel.button--border-thick::before {
 border: 3px solid;
 transform: translate3d(0, 100%, 0) translate3d(0, -3px, 0);
}

.button--itzel::before, 
.button--itzel .button__icon {
 transition: transform 0.3s;
 transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1);
}

.button--itzel .button__icon {
 position: absolute;
 top: 100%;
 left: 50%;
 padding: 20px;
 font-size: 20px;
 transform: translate3d(-50%, 0, 0);
}

.button--itzel > span {
 display: block;
 padding: 20px;
 transition: transform 0.3s, opacity 0.3s;
 transition-delay: 0.3s;
}

.button--itzel:hover::before {
 transform: translate3d(0, 0, 0);
}

.button--itzel:hover .button__icon {
 transition-delay: 0.1s;
 transform: translate3d(-50%, -100%, 0);
}

.button--itzel:hover > span {
 opacity: 0;
 transform: translate3d(0, -50%, 0);
 transition-delay: 0s;
}

Lihat  Unduh

Password: www.duniadesain.net

Script ini bisa bekerja di ( IE9, Google Chrome 30+, Firefox 27+)

Dan itulah gaya untuk efeknya.
Kami harap Anda menikmati gaya ini dan menemukannya inspirasi!
Source: Tympanus