Tutorial Pemrograman

Cara Menampilkan Wrapped Contact Us dengan CSS3

Selain menggunakan form contact us yang ada di website, kini kita juga dapat memanfaatkan social media sebagai penghubung antara admin dan pengunjung. Yang perlu dilakukan adalah membuat tombol contact us yang terhubung langsung dengan social media website.

Kali ini, kita akan membuat tampilan tombol contact us. Selain itu, kita akan menambahkan efek wrapped, dan efek hover ke dalam tombol. Menarik bukan? Bagaimana cara membuatnya? Yuk langsung saja buka komputer kamu, dan ikuti beberapa langkah mudah berikut ini.

1. Buka program XAMPP yang ter-install di computer kamu dan aktifkan menu Apache. Apache di XAMPP berfungsi untuk menghubungkan antara kode yang diketik di teks editor dan browser.

2. Buka program teks editor yang ter-install di computer kamu, disini saya menggunakan teks editor Notepad++. Ketikkan kode HTML5 berikut ini.

<html>
<head>
	<title>Icon Sosmed</title>
	<meta charset="UTF-8">
	<link rel="stylesheet" href="style.css">
	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
	<div class="wrapper">
		<div class="box-area">
			<div class="box"><i class="fa fa-facebook"></i></div>
			<div class="box"><i class="fa fa-twitter"></i></div>
			<div class="box"><i class="fa fa-linkedin"></i></div>
			<div class="box"><i class="fa fa-envelope"></i></div>
			<div class="box-text">Contact Us</div>
		</div>
	</div>
</body>
</html>

Simpan kode HTLM5 di atas di folder xampplite – htdocs – buat folder baru dengan nama wrappedSosmed – simpan kode di atas dengan nama index.php.

3. Untuk melihat hasil, buka browser di komputer kamu dan ketikkan alamat url: http://localhost/wrappedSosmed, dan lihat hasilnya.

4. Gambar di atas hanya menunjukan beberapa ikon social media, dan tulisan ‘contact us’. Untuk menampilkan efek wrapped dan efek hover, ketikkan kode CSS3 berikut.

.wrapper{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
}
.box-area{
	display: inline-block;
	text-align: center;
	position: relative;
	margin: 0 .5em;
	padding: 0;
}
.box-area:hover .box-text{
	opacity: 0;
	transition: opacity .5s ease-out;
}
.box-area:hover .box{
	border-radius: 50%;
	margin: 0;
	box-shadow: 0 0 15px #000;
}
.box-text{
	border-radius: 0;
	position: absolute;
	font-size: 2.5em;
	font-weight: 900;
	letter-spacing:5px;
	top: 0;
	left: 0;
	right: 0;
	opacity: 1;
	pointer-events: none;
	text-transform: uppercase;
	transition: opacity .5s ease-out;
	font-family: roboto;
	color: #fff;
	box-shadow: none;
}
.box, .box-text{
	background-color: deeppink;
	line-height: 90px;
}
.box{
	border-radius:0;
	cursor: pointer;
	display: inline-block;
	height: 90px;
	margin: 0;
	transition: background-color .5s ease-out, border-radius .5s ease-out;
	width: 90px;
}
.box i{
	padding: 30px;
	font-size: 30px;
	color: #fff;
}
.box:hover{
	background-color: #000;
	color: #000;
}

Simpan kode HTML5 di folder xampplite – htdocs – buat folder baru dengan nama wrappedSosmed  – simpan code CSS3 dengan nama style.css.

5. Reload alamat url: http://localhost/wrappedSosmed, dan lihat hasilnya.

6. Ketika kita klik tombol contact us, maka akan muncul ikon social media. Ketika kita klik salah satu icon, maka ikon berubah warna menjadi hitam.

7. Tampilan lainnya. Sangat menarik bukan?

8. Selesai.

Mudah sekali bukan. Sekian tutorial ‘Cara Menampilkan Wrapped Contact Us dengan CSS3’. Selamat mencoba.

Tutorial Lainnya dari Penulis
Komentar

Leave a Reply

Your email address will not be published. Required fields are marked *

Inwepo adalah media platform yang membantu setiap orang untuk belajar dan berbagi tutorial, tips dan trik cara penyelesaian suatu masalah di kehidupan sehari-hari dalam bentuk teks, gambar. dan video.

Dengan bergabung bersama kami dan membuat 1 tutorial terbaik yang kamu miliki dapat membantu jutaan orang di Indonesia untuk mendapatkan solusinya. Ayo berbagi tutorial terbaikmu.

Ikuti Kami di Sosmed!

        

Berlangganan Tutorial Gratis Melalui Email!

Copyright © 2020 Inwepo - All Rights Reserved.

To Top