Cara Membuat Button Modern dengan HTML dan CSS

Halo semuanya pada artikel alafgani.web.id kali ini kita akan membahas, bagaimana caranya membuat button modern dengan html dan css? setelah kita mempelajari banyak hal mengenai tutorial html yang sudah kami berikan. perlu kita melihat referensi mengenai desain website yang modern.

untuk mendapatkan website yang modern tentunya dimulai dari elemen html nya dulu seperti tombol, form, dan sebagainya. nah di kesempatan ini kita akan membuat button modern. langsung saja yuk kita bahas.

Baca Juga : 5 Contoh Coding Tombol Modern HTML dan CSS

Membuat File

Sebelum masuk ke syntax nya, siapkan terlebih dahulu file index.html dan style.css seperti biasanya, jika sudah simpan di folder document agar cepat mencarinya.

Membuat Button

Masukan syntax ini di index.html.

<body>
<div class="wrapper">
<h1>Buttons Styled with CSS</h1>

<h2>Colours & styling</h2>
<div class="layout">
<div class="button-box">
<button class="one">Solid button</button>
</div>
<div class="button-box">
<button class="two">Line button</button>
</div>
<div class="button-box-special">
<button class="three">Ghost button</button>
</div>
<div class="button-box">
<button class="four">Round button</button>
</div>
<div class="button-box">
<button class="five">Shadow button</button>
</div>
<div class="button-box">
<button class="six">Inset shadow</button>
</div>
</div>

<h2>2D Transitions & Transforms</h2>
<div class="layout">
<div class="button-box">
<button class="seven">Grow button</button>
</div>
<div class="button-box">
<button class="eight">Shrink button</button>
</div>
<div class="button-box">
<button class="nine">Rotate button</button>
</div>
<div class="button-box">
<button class="ten">Border change</button>
</div>
<div class="button-box">
<button class="eleven">Click effect</button>
</div>
<div class="button-box">
<button class="twelve">Clickable button</button>
</div>
</div>

<h2>Brand buttons</h2>
<div class="layout">
<div class="button-box">
<button class="thirteen">Buy Now</button>
</div>
<div class="button-box">
<button class="fourteen">Google Search</button>
</div>
<!-- <div class="button-box">
<button class="fifteen">Slide click</button>
</div> -->
</div>

<h2>Gradient buttons</h2>
<div class="layout">
<div class="button-box">
<button class="sixteen">Button</button>
</div>
<div class="button-box">
<button class="seventeen">Button</button>
</div>
<div class="button-box">
<button class="eighteen">Button</button>
</div>
</div>

<h2>Animated buttons</h2>
<div class="layout">
<div class="button-box">
<button class="nineteen"><span>Click to buy</span></button>
</div>
<div class="button-box">
<button class="twenty"><span>Continue</span></button>
</div>
<div class="button-box">
<button class="twenty-one"><span>Slide across</span></button>
</div>
</div>
</div>
</body>

Setelah di simpan maka kita lanjut untuk membuat styleing css nya, Masukan syntax dibawah ini kedalam style.css.

* {
box-sizing: border-box;
}

.wrapper {
text-align: center;
font-family: Arial, Helvetica, sans-serif;
}

h1 {
text-transform: uppercase;
}

button {
width: 200px;
padding: 20px;
font-size: 20px;
font-weight: 700;
cursor: pointer;
border: none;
}

.button-box-special {
background: #383b3a;
}

button:focus {
outline: none;
}

/* Button Styles */

.one {
background: lightcoral;
color: #272829;
border-radius: 5px;
}

.two {
background: #fff;
color: black;
border: 2px solid black;
transition: background 400ms ease-out,
color 400ms ease-out,
border 400ms ease-out; 
}

.two:hover {
background: #E00462;
color: #fff;
border: none;
}

.three {
background: #383b3a;
color: #1bbb85;
border: 2px solid #1bbb85;
border-radius: 5px; 
transition: background 400ms ease-out,
color 400ms ease-out; 
}

.three:hover {
background: #1bbb85;
color: #383b3a;
border-radius: 5px; 
}

.four {
background: tomato;
color: #272829;
border-radius: 50px;
}

.five {
background: #1bbbac;
color: #383b3a;
border-radius: 5px;
box-shadow: 0 3px 5px #777777;
}

.six {
background: #1bbbac;
color: #383b3a;
border-radius: 5px;
box-shadow: inset 0 0 8px #777777;
}

.seven {
background: darkblue;
color: white;
border-radius: 5px;
transition: all 300ms;
}

.seven:hover {
transform: scale(1.1);
letter-spacing: 2px;
background: white;
color: darkblue;
box-shadow: 2px 2px 3px rgba(0,0,0,0.57);
}

.eight {
background: darkmagenta;
color: white;
border-radius: 5px;
transition: transform 300ms;
}

.eight:hover {
transform: scale(0.9);
}

.nine {
background: darkred;
color: lightgray;
border-radius: 5px;
transition: transform 200ms;
}

.nine:hover {
transform: rotate(5deg);
}

.ten {
background: white;
color: goldenrod;
border: 2px solid goldenrod;
border-radius: 5px;
transition: all 300ms;
}

.ten:hover {
color: #494949;
border: 2px solid #494949;
border-radius: 50px;
}

.eleven {
background: #1bbbac;
color: #383b3a;
border-radius: 5px;
box-shadow: 0 3px 5px #777777, inset 0 0 0px #777777;
transition: transform 200ms;
}

.eleven:hover {
background: #1bb7a9;
box-shadow: 0 0px 0px #777777, inset 0 0 10px #777777;
}

.eleven:active {
transform: scale(0.98);
}

.twelve {
background: #fff;
color: #383b3a;
border: 1px solid #ccc;
border-radius: 5px;
box-shadow: 0 3px #ccc;
transition: transform 100ms;
}

.twelve:hover {
transform: translateY(1px);
box-shadow: 0 2px #ccc;
}

.twelve:active {
transform: translateY(3px);
box-shadow: 0 0 1px #ccc;
}

.thirteen {
background: #ff9900;
background: linear-gradient(180deg, #ffac2f, #ff9900);
color: #232528;
font-weight: 400;
border: .5px solid #232528;
padding: 10px 0;
}

.thirteen:hover {
background: #f69709;
background: linear-gradient(180deg, #f5a122, #fc6d0e);
}

.fourteen {
background: #dcdee1;
color: #757573;
font-weight: normal;
padding: 10px 20px;
width: auto;
border-radius: 3px;
}

.fourteen:hover {
border: .5px solid #757573;
box-shadow: 0 1px 2px #757573;
}

.sixteen {
background:linear-gradient(90deg, #ff82c7, #a776e8);
color: white;
text-transform: uppercase;
font-weight: 800;
}

.seventeen {
background:linear-gradient(to bottom, lightgray, lightgray 15%, orange);
color: white;
text-transform: uppercase;
font-weight: 800;
}

.eighteen {
background:linear-gradient(to right, red 25%, gold 25% 50%, green 50% 75%, blue 75% 100%);
color: white;
text-transform: uppercase;
font-weight: 800;
}

.nineteen {
border-radius: 4px;
background: linear-gradient(to right, #67b26b, #4ca2cb);
color: #fff;
padding: 20px 0;
text-transform: uppercase;
font-weight: 600;
}

.nineteen span {
position: relative;
transition: 400ms;
}

.nineteen span::after {
content: '\00bb';
position: absolute; 
opacity: 0;
top: 0;
right: -20px;
transition: 500ms;
}

.nineteen:hover span {
padding-right: 25px;
}

.nineteen:hover span::after {
opacity: 1;
right: 0;
}

.twenty {
background: #fff;
color: #3feb80;
border: 2px solid #3feb80;
border-radius: 50px;
text-transform: uppercase;
padding-left: 0;
padding-right: 0;
}

.twenty span {
position: relative;
position: 400ms;
}

.twenty span::after {
content: '\203A';
position: absolute;
opacity: 0;
right: -10px;
transition: 400ms ease-out 100ms;
}

.twenty:hover span::after {
opacity: 1;
right: -20px;
}

.twenty-one {
background: #fff;
color: royalblue;
border: 2px solid royalblue;
text-transform: uppercase;
position: relative;
z-index: 1;
transition: color 400ms;
}

.twenty-one::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: royalblue;
z-index: -1;
transition: transform 400ms ease-out;
transform: scaleX(0);
transform-origin: left;
}

.twenty-one:hover::before {
transform: scaleX(1);
}

.twenty-one:hover {
color: #fff;
}

/* Layout */

.layout {
max-width: 900px;
margin: 0 auto;
/* border: 2px solid red; */
display: flex;
flex-flow: row wrap;
justify-content: center;
}

.button-box,
.button-box-special {
width: 250px;
height: 150px;
/* border: 1px solid black; */
margin: 10px;
display: flex;
justify-content: center;
align-items: center;
}

Sekarang kita akses index.html nya melalui browser, seperti inilah button yang tadi dibuat:

button modern dengan html
hasil design (codepen.jennifer)

Penutup

Itulah bagaimana cara membuat button modern dengan html dan css yang kami berikan contohnya. untuk mempelajari lebih lanjut silahkan kamu try in error pada syntax tersebut untuk mengetahui fungsi-fungsi yang berjalan. semoga bermanfaat. terimakasih sudah berkunjung.

Jika Kamu mencari kursus website tanpa coding kami memberikan layanan kursus private online yang membantu kamu untuk mewujudkan website impian yang kamu inginkan, tidak perlu khawatir terkait jadwal kursus, Kami bisa menyesuaikan waktu yang kamu tentukan, Baca selengkapnya yuk!

Kursus Online WordPress cilegon

Code by jennifer codepen.

Leave a Comment