Skip to main content

Create a hover button using css - Creation Code

 HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hover button</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <button>Creation code</button>
</body>
</html>

CSS:

body{
    margin: 0;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: navy;
}
p{
    font-size: 3rem;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    position: relative;
    right: 50px;
}
button{
    position: relative;
    border: none;
    outline: none;
    width: 170px;
    height: 55px;
    background-color: red;
    font-size: 1.4rem;
    color: #fff;
    border-radius: 7px;
    cursor: pointer;
    font-family: 'Times New Roman', Times, serif;
}
buttona::before{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color:red;
    z-index: -1;
    border-radius: 7px;
    transform: translateY(5px);
}
button:active{
    transform: translateY(5px);
}
button:active:before{
    transform: translateY(0);
}

Follow my socials:

Youtube:https://www.youtube.com/channel/UCU1qNFntn7dCi9uqyvrGKOg

Instagram: https://www.instagram.com/python.math/

Twitter:https://twitter.com/Pritish369

For any question or coding discussion, you can join my discord or telegram:

Discord:https://discord.gg/be7MmSuV

Telegram:https://t.me/Python_Math_Community

Labels:

Comments

Post a Comment

Popular posts from this blog

Draw Minecraft Charater in Python

  Minecraft  is a  sandbox video game  developed by the Swedish video game developer  Mojang Studios . The game was created by  Markus "Notch" Persson  in the  Java programming language . Following several early private testing versions, it was first made public in May 2009 before fully releasing in November 2011, with  Jens Bergensten  then taking over development.  Minecraft  has since been ported to several other platforms and is the  best-selling video game of all time , with over 238 million copies sold and nearly 140 million  monthly active users  as of 2021 . We gonna build a character of Minecraft using our creativity and coding skills so let's drive into the code: Code: import turtle as t def eye ( r , a ):     t . fillcolor ( 'brown' )     t . begin_fill ()     t . circle ( r , a )     t . end_fill () t . begin_fill () t . fillcolor (...
Post a Comment
Read more

Age and Gender Detection In Python - Creation Code

Gender Identity: Gender identity is the personal sense of one's own  gender . Gender identity can correlate with a person's  assigned sex  or can differ from it. In most individuals, the various biological determinants of sex are congruent and consistent with the individual's gender identity.  Gender expression  typically reflects a person's gender identity, but this is not always the case. While a person may express behaviors, attitudes, and appearances consistent with a particular  gender role , such expression may not necessarily reflect their gender identity. The term gender identity was coined by  Robert J Stoller  in 1964. Modules and assets: In this project, we will use the assetsOpenCV library which will help us to play with the camera  We also use some datasets to identify the faces and ages you can find those datasets  here Explanation: We will first train our models test.py import cv2 def faceBox ( net , frame , conf_thresho...
Post a Comment
Read more

How To Draw BMW Logo - In Python

 I know I don't need to introduce BMW as it is a very popular luxury car. Today we gonna draw the BMW logo in python. I know that you can draw it using a pencil and other tools like AutoCAD etc. But we are programmers we talk with computers so let's tell our computer to draw this logo for use with the help of python. Module The only module we will use is that turtle Code: import turtle as t t.begin_fill() t.fillcolor( '#008ac9' ) for i in range ( 50 ):     t.forward( 4 )     t.left( 2 ) t.right(- 80 ) t.forward( 116 ) t.right(- 90 ) t.forward( 132 ) t.end_fill() t.penup() t.pendown() t.right( 90 ) for i in range ( 50 ):     t.forward( 4 )     t.left(- 2 ) t.right( 80 ) t.forward( 116 ) t.forward(- 116 ) t.right( 90 ) t.begin_fill() t.fillcolor( '#008ac9' ) for j in range ( 45 ):     t.forward(- 4 )     t.left(- 2 ) t.right(- 90 ) t.forward( 116 ) t.end_fill() t.right( 180 ) t.forward( 116 ) t.right( 90 ) for i in ...
Post a Comment
Read more