Hey coders and welcome back! Today, we'll see how to make cool css buttons with an animation where the square-cube buttons transform to circle shaped when hovered. We will break-down the concepts of this project and we will also see how to configure this project for your needs. Now, let's dive in!

A.CONCEPTS
  • Basic customizations for icons: We first set basic margin,padding,etc. for the icons to set properly in position in the page.
  • Transform Shape: Then, we code the transformation where the shape of the buttons transform from cube to circle.
  • Icon: Then, we style the size of the icon itself and give it white color
  • Enlargement: When hovered the icon inside the button actually enlarges itself a little thanks to the scale code we added.
And that's pretty much the concepts. Next, we'll see how to modify this project.

B.CONFIGURATION
The only thing you will most probably need to configure is the link that redirects when you click the button. In our index.html file, you will realize that in the icons div class, there are codes such as <a href="https://facebook.com"> . To change it just change the link inside the " " marks. For an example, you can change <a href="https://instagram.com"> to <a href="https://instagram.com/codingporium">

You can watch my video tutorial below too and also download the source codes at the bottom of the page. Thanks for reading and I'll see you in the next post. Byeee!



 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
<!-- Created by CodingPorium,2021. Visit https://youtube.com/c/CodingPorium for more tutorials with free source code -->
<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="utf-8">
      <title>Cool CSS Buttons with Hover Animation | CodingPorium</title>
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
<style>
/*Imports Poppins font for text (if necessary only)*/
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');
*{
  margin: 0;
  padding: 0;
}
/*Style for HTML and Body tags*/
html,body{
  display: grid;
  height: 100%;
  place-items: center;
  text-align: center;
}
/*Basic customization for icons*/
.icons{
  list-style: none;
}
.icons li{
  height: 70px;
  width: 70px;
  display: inline-block;
  margin: 0 10px;
  cursor: pointer;
  position: relative;
}
/*Transform shape from cube to circle code*/
.icons li:before{
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: -1;
  border-radius: 10%;
  background: linear-gradient(45deg, #FF0F7B, #F89B29);
  transition: all 0.3s ease-in;
}
.icons li:hover:before{
  transform: rotate(360deg);
  border-radius: 100%;
}
/*Style for white color icon*/
.icons li a span{
  font-size: 27px;
  line-height: 70px;
  color: #fff;
  transition: all 0.3s ease-out;
}
/*Enlarge icons when hovered*/
.icons li:hover a span{
  transform: scale(1.2);
}
</style>
   </head>
   <body>
     <h1 style="color:black;text-align:center;font-family:poppins;">Cool CSS Buttons with Hover Animations</h1>
      <ul class="icons">
        <!--Jusr change the links after the href= to add your own social media account link :)-->
         <li><a href="https://facebook.com"><span class="fab fa-facebook-f"></span></a></li>
         <li><a href="https://twitter.com"><span class="fab fa-twitter"></span></a></li>
         <li><a href="https://twitter.com"><span class="fab fa-instagram"></span></a></li>
         <li><a href="https://github.com"><span class="fab fa-github"></span></a></li>
         <li><a href="https://youtube.com"><span class="fab fa-youtube"></span></a></li>
      </ul>
   </body>
</html>
Tags

Post a Comment

Post a Comment

Previous Post Next Post